图像填充在CSS，HTML中 [英] Image Padding in CSS, HTML

问题描述

我在表格中遇到图像问题。虽然我设置了tr width = 95，并且图像的宽度也是95，但tr的宽度将自动为97（右边为2 px填充）。

不过，我已经明确表示style =padding：0px。

示例页面如下所示：
http://beta.worcell.com/sony.html

另我的问题是上下箭头（在买入栏内）。我希望它们与文本框具有相同的间距，但向底部箭头添加另一个换行符会创建太多的空间。我可以在CSS中改变它吗？

谢谢。

解决方案

填充看起来不是问题，它是你设定的边距。在样式表中，您有

  img {
 padding：0px; 
 border：0px; 
 margin：-2px; 
} 
  

margin：-2px;部分是什么使你的图像97px而不是95px。将其设置为margin：0px;图像显示正常。您还需要添加，

  menu img {
 margin：-2px; 
} 
  

以保持您的菜单图像与您的菜单图像一致。

对于向上和向下箭头，您需要重新考虑您的标记。下行链路在一个表格内，但上行链路不在，这有点不一致。它们也包含在以块形式显示的段落标签中，这使得它们显示为一个在另一个之下，所以向下箭头不会出现，直到数量框的底部等。

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).

However, I've explicitly stated style="padding: 0px".

A sample page is as follows: 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?

Thank you.

解决方案

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,

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.

这篇关于图像填充在CSS，HTML中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！