Image takes up unnecessaray padding and margin or space between two images

Question

I want all the images in a single line inside the pink box that is inside .img-menu but the 3rd image goes below even when the margin, padding are 0. What is the reason for the extra space? Also, I want the the pink box (.img-menu) properly aligned to the list-item. 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;
    }

Are you wanting the entire pink box to be underneath the `ul` or next to it? — Nerdwood, Sep 03 '15 at 09:06
just change the images width from relative units (70%) to absolute (175px is 70% of 250px) : https://jsfiddle.net/zLuw50h4/5/ — Black0ut, Sep 03 '15 at 09:15

score 0 · Answer 1 · answered Sep 03 '15 at 09:19

To put the images in a straight line, add a width/max-width to each li rather than to each img, e.g.

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

If you are wanting the image list to be next to the text menu items, then I would recommend changing your HTML structure, e.g.

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

score 0 · Answer 2 · answered Sep 03 '15 at 09:28

Basically you currently have a container width of 700.

You want 3 .img-menu-list to fit in one row. Lets define the width to 33% then.

Also, because there is a display:inline-block there will always be space between them. Fighting the space between inline-block elements.

I changed the display:inline-block to float:left.

So we end with something like this:

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

score 0 · Answer 3 · answered Sep 03 '15 at 09:34

I would suggest reworking the HTML structure and the CSS applied to it. Here is a slightly-modified version for you to think about. This is scaling each image down to 175px as per your example, but you can change the width for .img-menu-list and .img-menu as needed.

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;
}

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

For your list to be on a single line, you have to set a width for LIs. So you need to set the width depending on number of images (100%/3 = 33,3...%).

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

But this is not enought, because of unwanted blank space between LIs.

How to remove the space between inline-block elements?

You'll find many ways to fix this.

Quickly, just close LI tags on the same line of the next openning one :

<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

You can now adjust images width depending on the result you want - Fiddle

Image takes up unnecessaray padding and margin or space between two images

4 Answers4

HTML

CSS