Question

在此图库的示例中：

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

<head>
<style>
.thumbnail 
{
     float:left;
     width:110px;
     height:90px;
     margin:5px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough    room.</p>
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>

如果从.thumbnail类中删除宽度，则图像彼此相邻放置，两者之间没有空格。但对于没有浮动的常规图像元素，似乎会自动出现一些余量。我需要了解一般行为。浮动的行为是它们彼此相邻放置。为什么会影响图像元素的边距？

感谢您的帮助。

Answer 1

只有block elements可以有边距。

添加：

display:block到你的css

Answer 2

每张图片都有自己的宽度尺寸。如果您没有在类中设置宽度大小，那么图像将无法很好地对齐。如果你在类中声明宽度，就像你为该图像创建一个容器，无论该图像的宽度是多少，它都会相应地调整为110像素。是的，浮动将所有图像对齐。

HTML img行为 - 浮动时为什么没有保证金？

2 个答案: