I'm having an issue with basic CSS. Container moves when it has an image in it

Question

<html>
<head>
<style>
    <!-- * {
    box-sizing: border-box;
    } -->

    div {
        width: 50%;
        margin: auto;
    }

    .cardBox {
        display: inline-block;
        border: solid 1px black;
        height: 102px;
        width: 68px;
        margin: 100px 0px 0px 0px;
        padding: 0px;
    }

    span img {
        height: 100%;
        width: 100%;
    }
</style>
</head>
<body>
    <div>
        <span class="cardBox" id="box1"><img src="h4.png"></span>
        <span class="cardBox" id="box2"><img src="h4.png"></span>
        <span class="cardBox" id="box3"><img src="h4.png"></span>
        <span class="cardBox" id="box4"></span>
        <span class="cardBox" id="box5"></span>
    </div>
</body>
</html>

Same result in Chrome and FF. I've tried to set the image height/width to match the span cardBox's, I've also tried less than 100%. I also tried auto. It all results in various movement of the container spans. The image itself is 99x66px, and below is a copy of it:

The other question I have is why is their a gap between the spans?

What do you mean "move"? They (the span) break to second line? — Eezo, Sep 27 '17 at 04:07
Cut and paste the code and you will see. They move down one or a few pixels. — erv, Sep 27 '17 at 04:08

score 1 · Accepted Answer · answered Sep 27 '17 at 04:14

1

There was some problem with inline-block. Changed that to inline-flex and working perfectly fine.

Here is the snippet.

div {
  width: 50%;
  margin: auto;
}

.cardBox {
  display: inline-flex;
  border: solid 1px black;
  height: 102px;
  width: 68px;
  margin: 100px 0px 0px 0px;
  padding: 0px;
}

span img {
  height: 100%;
  width: 100%;
}

<div>
  <span class="cardBox" id="box1"><img src="https://i.stack.imgur.com/1MfOn.png"></span>
  <span class="cardBox" id="box2"><img src="https://i.stack.imgur.com/1MfOn.png"></span>
  <span class="cardBox" id="box3"><img src="https://i.stack.imgur.com/1MfOn.png"></span>
  <span class="cardBox" id="box4"></span>
  <span class="cardBox" id="box5"></span>
</div>

answered Sep 27 '17 at 04:14

Syam Pillai

4,967
2
26
42

1

Cheers, that sorted it. – erv Sep 27 '17 at 04:20
Any idea why there is a gap between the boxes? In my actual app I'm dragging images between multiple boxes and then click a button to move them all to the left such that there are no empty boxes between cards. Stacking them to the left involves .removeChild() and .appendChild(). After I do that operation, the gap between the boxes that either had a card in them or now has a card in them, disappears. When I inspect the css, the unstacked images and container spans, and the spans with the image appended into it, all have the exact same computed CSS values. – erv Sep 27 '17 at 04:39
1

It's not a bug. it's a feature in `inline-block`, `inline` and `inline-flex`. The browser gives space to look good. As it's two different tags, browser separating it with space, like browser separating `blocks` with new line. If you want to remove space, check out this - https://stackoverflow.com/questions/16678929/display-inline-block-what-is-that-space Better give `font-size:0` to the container – Syam Pillai Sep 27 '17 at 04:45
1

Cheers for that! That link helped me understand why my spans were losing their space after I clicked the button (I use a function to "clean" out the whitespace and empty text nodes in the DOM before doing further operations on it). – erv Sep 27 '17 at 05:03

score 0 · Answer 2 · answered Sep 27 '17 at 04:15

Well, just add display: block to the img in the span (code below).
And the second one, display: inline-block create a margin-right with value = 4px (i don't remember why is that, maybe need to google it later), so there are two way to fix it

Use float: left instead of display: inline-block
Or add margin-right: -4px to cardBox

<!-- * {
box-sizing: border-box;
} -->

div {
    width: 50%;
    margin: auto;
}

.cardBox {
    /*display: inline-block;*/
    border: solid 1px black;
    height: 102px;
    width: 68px;
    margin: 100px 0px 0px 0px;
    padding: 0px;
    float: left;
}

span img {
    height: 100%;
    width: 100%;
    display: block;
}

 <div>
        <span class="cardBox" id="box1"><img src="http://www.placehold.it/99x66"></span>
        <span class="cardBox" id="box2"></span>
        <span class="cardBox" id="box3"><img src="http://www.placehold.it/99x66"></span>
        <span class="cardBox" id="box4"></span>
        <span class="cardBox" id="box5"></span>
    </div>

I'm having an issue with basic CSS. Container moves when it has an image in it

2 Answers2