Line up img and div css

Question

I am trying to line up <img> with a div but it seems like there is some margin/padding in <img>.

Here is what i tried:

.Box {
  display: inline-block;
}

.myDiv {
  background: blue;
  width: 100px;
  color: white;
}

img {
  margin: 0px !important;
  padding: 0px !important;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="Box">
  <div class="myDiv">
    Content
  </div>
</div>
<div class="Box">
  <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg">
</div>

I wish it would look like this:

Seems like declaring `.Box img { vertical-align: bottom; }` is all you'll need. `img` is an *inline* element by default so you'll need to *vertically align* it accordingly. — UncaughtTypeError, Dec 12 '17 at 16:48

score 6 · Accepted Answer · answered Dec 12 '17 at 16:48

The default vertical alignment of inline elements is baseline, so you want something like bottom instead, and also remove the height on your box div (unless you want it 100px tall, which your example image doesn't show):

vertical-align: bottom;

Example:

.Box {
  display: inline-block;
}

.myDiv {
  background: blue;
  width: 100px;
  color: white;
}

img {
  margin: 0px !important;
  padding: 0px !important;
  width: 100px;
  height: 100px;
  background: red;
  vertical-align: bottom;
}

<div class="Box">
  <div class="myDiv">
    Content
  </div>
</div>
<div class="Box">
  <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" />
</div>

Line up img and div css

1 Answers1