CSS、HTML 中的图像填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1001903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image Padding in CSS, HTML
提问by segfault
I'm having problems with images in a table. Although I set tr width=95, and image has width of 95 as well, the tr will automatically have a width of 97 (2 px padding on the right).
我在处理表格中的图像时遇到问题。尽管我设置了 tr width=95，并且图像的宽度也为 95，但 tr 的宽度将自动为 97（右侧的 2 px 填充）。
However, I've explicitly stated style="padding: 0px".
但是，我已经明确说明了 style="padding: 0px"。
A sample page is as follows: http://beta.worcell.com/sony.html
示例页面如下：http: //beta.worcell.com/sony.html
Another problem that I have is with the up and down arrows (inside the buy column). I would like them to have equal spacing from the text box, but adding another line break to the bottom arrow would create too much of a space. Would I be able to change that in CSS?
我遇到的另一个问题是向上和向下箭头（在购买列内）。我希望它们与文本框的间距相等，但是在底部箭头上添加另一个换行符会产生过多的空间。我能在 CSS 中改变它吗？
Thank you.
谢谢你。
回答by Rich Adams
The padding doesn't look to be the issue, it's the margins you have set. In the stylesheet you have
填充看起来不是问题，而是您设置的边距。在样式表中，您有
img {
padding:0px;
border:0px;
margin:-2px;
}
The "margin: -2px;" part is what is making your images 97px rather than 95px. Set it to "margin: 0px;" and the images appear normal. You then also need to add,
“边距：-2px;” 部分是使您的图像 97px 而不是 95px 的原因。将其设置为“边距：0px；” 并且图像显示正常。然后你还需要添加，
menu img {
margin: -2px;
}
in order to keep your menu images aligned as you had them.
为了使您的菜单图像保持对齐。
For the up and down arrows you need to re-think your markup. The down link is within a form, yet the up link isn't, which is a bit inconsistent. They're also contained within paragraph tags which are displaying as blocks, which is making them appear one below the other, so the down arrow doesn't appear until after the bottom of the quantity box, etc.
对于向上和向下箭头，您需要重新考虑您的标记。下行链路在表单内，上行链路不在表单内，这有点不一致。它们也包含在显示为块的段落标签中，这使得它们一个在另一个下面，所以向下箭头直到数量框的底部之后才会出现，等等。
回答by mkoryak
you need to start out with a good css reset. that should take care of the padding issues for you. import the css reset as the first css style on your page, and go from there.
你需要从一个好的 css reset 开始。这应该为您解决填充问题。导入 css reset 作为页面上的第一个 css 样式，然后从那里开始。
also, dont use
另外，不要使用
<br/>
if you can help it. everything that br does can be achieved by using margin
如果你能帮忙的话。br 所做的一切都可以通过使用 margin 来实现
回答by Jonathan Fingland
part of the problem is this: in styles.css (line 77) you have
问题的一部分是这样的：在styles.css（第77行）中，你有
tr td {
border:1px solid #DDDDDD;
padding:0.6em;
}
回答by TFM
"padding: 0px" in your code applies to the table cell in this case, not the image tag.
在这种情况下，代码中的“padding: 0px”适用于表格单元格，而不是图像标签。
回答by Shadi Almosri
You need to:
你需要：
styles.css (line 15)
img {
border:0 none;
margin:-2px; <-- remove this
padding:0;
}
styles.css (line 77)
tr td {
border:1px solid #DDDDDD;
padding:0.6em; <-- remove this
}
回答by jeroen
Hmmmmm, 152 warnings in HTML Validator, lots of unclosed tags....
嗯，HTML 验证器中有 152 个警告，许多未关闭的标签......
For the specific problem of the space next to the image, you could try removing the white-space between the </a>tag and the </td>tag.
对于图片旁边空格的具体问题，可以尝试去掉</a>标签和</td>标签之间的空格。
