图像占用了两个图像之间不必要的填充和边距或空间答案

【问题标题】：Image takes up unnecessaray padding and margin or space between two images图像占用了两个图像之间不必要的填充和边距或空间
【发布时间】：2015-09-03 08:58:29
【问题描述】：

我希望 .img-menu 内的粉红色框内的所有图像都在一行中，但即使边距、填充为 0，第三张图像也会低于。额外空间的原因是什么？另外，我希望粉红色框（.img-menu）与列表项正确对齐。 JSfiddle - https://jsfiddle.net/zLuw50h4/

HTML

<div class="sub">
    <div class="sub-menu">
        <ul class="menu">
                <h3>Header</h3>

            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
        </ul>
    </div>
    <div class="img-menu">
        <ul class="img-ul">
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
        </ul>
    </div>
</div>

CSS

    .sub {
        position: absolute;
        background: skyblue;
        width: 1000px;
        height: 200px;
    }
    .sub-menu {
        width: 250px;
    }
    .sub-menu li {
        float: left;
        width: 48%;
        background: blue;
        margin: 0 0 2% 2%;
    }
    .img-menu {
        width: 700px;
        background: pink;
        float: right;
        margin: 0;
        padding: 0;
    }
    .img-ul {
        margin: 0;
        padding: 0;
    }
    .img-menu-list {
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .img-menu-list a img {
        width: 70%;
        margin:0;
        padding:0;
    }

【问题讨论】：

您希望整个粉色框位于ul 下方还是旁边？
我希望粉红色框内的图像成一条直线。
只需将图像宽度从相对单位 (70%) 更改为绝对单位（175px 是 250px 的 70%）：jsfiddle.net/zLuw50h4/5

标签： css margin padding

【解决方案1】：

要将图像放在一条直线上，请将width/max-width 添加到每个li 而不是每个img，例如

.img-menu-list {
    display: inline-block;
    max-width: 175px;  /* same as 70% of 250px */
    margin: 0;
    padding: 0;
}
.img-menu-list a img { }

如果您希望图像列表位于文本菜单项旁边，那么我建议您更改 HTML 结构，例如

<div class="sub">
    <div class="sub-menu">
        <h3>Header</h3>
        <ul class="menu">
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
        </ul>
        <div class="img-menu">
            <ul class="img-ul">
                <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
                </li>
                <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
                </li>
                <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
                </li>
            </ul>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

基本上，您当前的容器宽度为 700。

您希望 3 个 .img-menu-list 放在一行中。然后让我们将宽度定义为33%。

另外，因为有一个display:inline-block，所以它们之间总会有空格。 Fighting the space between inline-block elements.

我将display:inline-block 更改为float:left。

所以我们以这样的方式结束：

 .sub {
        position: absolute;
        background: skyblue;
        width: 1000px;
        height: 200px;
    }
    .sub-menu {
        width: 250px;
    }
    .sub-menu li {
        float: left;
        width: 48%;
        background: blue;
        margin: 0 0 2% 2%;
    }
    .img-menu {
        width: 700px;
        background: pink;
        float: right;
        margin: 0;
        padding: 0;
    }
    .img-ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .img-menu-list {
        float: left;
        margin: 0;
        padding: 0;
        width: 33.33%;
    }
    .img-menu-list a img {
        width: 100%;
        margin:0;
        padding:0;
    }

<div class="sub">
    <div class="sub-menu">
        <ul class="menu">
                <h3>Header</h3>

            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
        </ul>
    </div>
    <div class="img-menu">
        <ul class="img-ul">
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
            <li class="img-menu-list"> <a href=""> <img src="https://placehold.it/250x140" alt=""> </a> 
            </li>
        </ul>
    </div>
</div>

【讨论】：

【解决方案3】：

我建议重新设计 HTML 结构和应用于它的 CSS。这是一个稍作修改的版本供您考虑。根据您的示例，这会将每个图像缩小到 175 像素，但您可以根据需要将 width 更改为 .img-menu-list 和 .img-menu。

HTML

<div class="sub">
    <div class="sub-menu">
        <h3>Header</h3>
        <ul class="menu">
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
        </ul>
        <div class="img-menu">
            <ul class="img-ul">
                <li class="img-menu-list"><a href=""><img src="https://placehold.it/250x140" alt=""></a>
                </li>
                <li class="img-menu-list"><a href=""><img src="https://placehold.it/250x140" alt=""></a>
                </li>
                <li class="img-menu-list"><a href=""><img src="https://placehold.it/250x140" alt=""></a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.sub {
    background: skyblue;
    width: 1000px;
    height: 199px;
    padding-top: 1px;
}
.menu {
    width: 250px;
    float: left;
    margin-right: 50px;
}
.menu li {
    float: left;
    width: 48%;
    background: blue;
    margin: 0 0 2% 2%;
}
.img-menu {
    width: 525px;  /* 175px * 3 */
    background: pink;
    float: left;
}
.img-ul {
    margin: 0;
    padding: 0;
    font-size: 0;
}
.img-menu-list {
    display: inline-block;
    width: 175px;
    margin: 0;
    padding: 0;
}
.img-menu-list a img {
    width: 100%;
    height: auto;
}

【讨论】：

【解决方案4】：

为了使您的列表位于一行，您必须为 LI 设置宽度。所以你需要根据图片的数量来设置宽度（100%/3 = 33,3...%）。

.img-menu-list {
    display: inline-block;
    margin: 0;
    padding: 0;
    width:33%;
}

但这还不够，因为 LI 之间存在不必要的空白。

How to remove the space between inline-block elements?

你会找到很多方法来解决这个问题。

快点，在下一个打开的同一行关闭LI标签：

<li class="img-menu-list"><a href="">
    <img src="https://placehold.it/250x140" alt=""></a>
</li><li class="img-menu-list">
    <a href=""><img src="https://placehold.it/250x140" alt=""></a>
</li><li class="img-menu-list">
    <a href=""><img src="https://placehold.it/250x140" alt=""></a>
</li>

See the Fiddle

您现在可以根据想要的结果调整图像宽度 - Fiddle

【讨论】：