0

为什么填充和边距在块 img 上有效，但在内联无效。

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

填充或边距（设置为 0）的唯一方法是如果我使用 display:block 作为图像样式的一部分。一旦我使用内联，每个图像之间就有几个像素，并且填充和边距被忽略。

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

4

3 回答 3

0

如果你想在一行中有更多图像，display: block你可以使用。float:left

于 2013-03-19T21:07:13.717 回答
0

我发现将所有内容包装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 向上滑动吗？同样的故事。您希望它们位于某个 400x200 区域的中心吗？它们被包装，添加vertical-align和text-align到div。

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

于 2013-03-19T18:42:57.950 回答
0

因此，您希望图像内联显示，但充当块？

你试过display: inline-block;吗？

于 2013-03-19T19:15:02.867 回答