3

As you can see in the image below, my layout is a bit off. For some reason, when I don't have an img tag within the bordered div, it "floats" up. There's no css that seems to differ to make it do this. When inspecting it, it seems to not be missing anything or having anything extra that would make it do this.

Oddly, when I put in input element inside of it, it then hangs down lower than the row of div's with images. When I put in img in it, it behaves correctly, sitting in line with the rest.

layout example

My html:

<div class="row">
  <div class="col-md-12 center-block">
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
  </div>
  <div class="col-md-12 center-block">
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
    <div class="border background-choice">
      <img src="background1.jpg">
    </div>
    <div class="border background-choice">
    </div>
  </div>
</div>

My css(.scss):

#background-upload-modal {
  .border {
    border: solid 2px black;
  }
  .background-choice {
    margin: 10px;
    height: 150px;
    width: 150px;
    display: inline-block;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
Tom Prats
  • 7,364
  • 9
  • 47
  • 77

2 Answers2

6

Try adding 

vertical-align: top

to 'background-choice'

.background-choice {
    vertical-align: top
}

This is a common issue people run into with display inline-block elements because the default alignment is baseline

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • 1
    This seemed to do it! I commented on the other answer, but it seems odd that having an input element within a div would misalign the entire div. `vertical-align` still solved it, but I'm just wondering why it was a problem in the first place – Tom Prats Mar 19 '14 at 17:55
  • vertical align is set to baseline by default I think. When you have empty and non empty divs in the same row the vertical spacing gets messed up. I have to research why this happens but I know that this is the cause of it – Huangism Mar 19 '14 at 18:01
  • I think the empty div is actually at baseline while the other 2 are being pushed down. I am having trouble finding the exact reason but in the future, it is always a good idea to define vertical align to inline-block elements – Huangism Mar 19 '14 at 18:08
  • Thanks, I'll check it out. Guess having it default to baseline makes sense, but I'm glad it's a simple solution to get them back to the correct alignment – Tom Prats Mar 19 '14 at 18:09
  • 1
    @TMP Consider the container as a paper and the nested inline elements as letters which sit on the [baseline](http://en.wikipedia.org/wiki/Baseline_(typography)) of their container. Check **[this demo](http://jsbin.com/bowoliro/2/edit)**: The tallest element moves the baseline (the red line in the demo) to below to be able to sit on the baseline, Thus the shorter elements will be moved down. Also, for letters have descenders like: `j g q p y` there's a space below the baseline (the green line in the demo). That's the gap appears below the inline elements and people often ask here to remove that – Hashem Qolami Mar 19 '14 at 20:07
  • 1
    @TMP It [would](http://stackoverflow.com/questions/22510403/4-extra-vertical-pixels/22510610#22510610) [be fixed](http://stackoverflow.com/questions/21834745/text-and-image-in-same-line/21834820#21834820) by aligning the inline elements to [bottom](http://jsbin.com/bowoliro/3/edit), [top](http://jsbin.com/bowoliro/4/edit) or [middle](http://jsbin.com/bowoliro/5/edit). – Hashem Qolami Mar 19 '14 at 20:13
1

You need to give your img a display value of block -

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

When img tags don't have this display type, they are inline and exhibit this odd "invisible margin" problem.

twistedpixel
  • 1,212
  • 4
  • 14
  • 33