What is causing the extra padding?

Question

I've got 2 section tags on top of each other. The first contains an image the second just some text.

But for some reason the first is putting a few pixels extra padding at the bottom. Why????

<section class="s1"><img src="something.jpg" width="500" height="500" /></section>
<section class="s2"> Test Test Test </section>

I tried this in the styling

section, img {
    padding: 0;
    margin: 0
}
.s1 {
    background-color: black
}
.s2 {
    background-color: red
}

Ignore the fact it's a broken image, does the same with a real image too.

Thanks.

Wow, 4 `display: block` answers. I prefer `vertical-align: top` — Oriol, Jul 12 '16 at 15:14

score 1 · Answer 1 · answered Jul 12 '16 at 14:27

1

At a glance this happens when display types are different.

display: block; fixes this.

answered Jul 12 '16 at 14:27

Tek

1

Thanks for the response Tek. Like you I assumed img where block by default. – Strontium_99 Jul 12 '16 at 14:33

score 1 · Accepted Answer · answered Jul 12 '16 at 14:27

1

The img is inline element. So make display: block for it.

answered Jul 12 '16 at 14:27

Alex M

Our replies are a couple of seconds apart! Has it always been this way? I thought `img` was block by default all this time... – Tek Jul 12 '16 at 14:28
OMG.... How thick am I :) Thanks for that. – Strontium_99 Jul 12 '16 at 14:28
@Tek Some browsers render `img` as `inline-block` element, some as `inline`. – Alex M Jul 12 '16 at 14:33
@AlexM I haven't found any browser which renders images as `inline-block`s by default. Anyways, `inline-block` replaced elements should behave basically like `inline` replaced elements, so it doesn't matter much. – Oriol Jul 12 '16 at 15:12

score 1 · Answer 3 · answered Jul 12 '16 at 14:29

1

You should add display: block; to image: https://jsfiddle.net/Mindaugas/jk4yyw48/1/

answered Jul 12 '16 at 14:29

Mindaugas M.

score 1 · Answer 4 · edited May 23 '17 at 11:58

1

<img> tags by default are displayed as inline block elements, however in an instance like this, you would want to use display:block; instead :

img { display: block }

Example

img {
  display: block;
}
section,
img {
  padding: 0;
  margin: 0
}
.s1 {
  background-color: black
}
.s2 {
  background-color: red
}

<section class="s1">
  <img src="something.jpg" width="500" height="500" />
</section>
<section class="s2">Test Test Test</section>

edited May 23 '17 at 11:58

Community

answered Jul 12 '16 at 14:29

Rion Williams

4 Answers4