Question

为什么填充和边距适用于块img，但不适用于内联。

我的CSS中的图像存在布局问题。我想在每个图像之间没有像素（没有边距，没有填充），我想要一行4个图像。

填充或边距（设置为0）的唯一方法是使用display：block作为图像样式的一部分。很快，当我使用内联时，每个图像之间有几个像素，填充和边距被忽略。

无论如何，我可以在内联图像中获得自己的填充和边距？

Answer 1

我发现将所有img包装到div是一种非常有用的做法。

<div class="image">
    <img src="/path/to/image.jpg">
</div>

用户可以添加任何带图像的附加操作。例如，您想要裁剪所有这些以适合400x200块。你这样做：

<style>
    .-crop {
        overflow: hidden;
    }
    .-crop img {
        min-width: inherit;
        min-height: inherit;
    }
    .image {
        width: 400px;
        height: 200px;
        min-width: 400px;
        min-height: 200px;
    }
</style>

<div class="image -crop">
    <img src="/path/to/image1.jpg">
</div>
<div class="image -crop">
    <img src="/path/to/image2.jpg">
</div>

包装图像时，更容易解决某些任务。你需要在悬停时使图像变大吗？它们已被换行，您更改img大小，但不是div，因此您的布局正常。您需要在点击时以20px向上滑动图像吗？相同的strory。你想让他们在400x200左右的中心？它们被包装，将vertical-align和text-align添加到div。

当然，在一般情况下只需img即可。但是当突然你必须添加一些额外的动作时 - 你需要包装它们。所以即使现在没有必要，我每次都会把它们包起来。只是为了将来。

Answer 2

所以你想让一个图像以内联方式显示，但是作为一个块呢？

您是否尝试过display: inline-block;？

Answer 3

如果您想在一行中拥有更多图片，可以使用display: block和float:left。

CSS Margin和Padding不适用于IMG元素，除非它们是display：block

3 个答案: