Header element is not same size as image inside (header does not have defined height)

Question

i'm making this website for a school project, and i can't figure out whats wrong with the header. For some reason there is a small gap at the bottom of the header underneath the image inside it. Despite not giving the header a defined height. Anyone know how to fix this or what the problem is?

HTML:

<header id="header-wrap">
    <img class="header-img" src="../images/header-img.png" alt="">
</header>

CSS:

header {
   text-align: center;
   grid-area: header;
}
#header-wrap {
   background-color: #212635;
}
.header-img {
   width: 50%;
   position: relative;
}

This is how it ends up looking: Click here

header {
  text-align: center;
  grid-area: header;
}

#header-wrap {
  background-color: red;
}

.header-img {
  width: 50%;
  position: relative;
}

<header id="header-wrap">
  <img class="header-img" src="https://i.stack.imgur.com/iqurS.jpg" alt="">
</header>

your question is not fully understandable, please provide a working example, for instance from jsfiddle — TVK, May 22 '19 at 11:34
What i want to know is why the header is larger than the image when it has no height. Shouldn't it be the size of the image inside of it by default? — dlirA01, May 22 '19 at 11:36

James Coyle · Accepted Answer · 2019-05-22T11:42:27.850

Images are displayed inline by default which causes a bit of extra space to be shown below the image as the vertical alignment aligns the bottom of the image with the text baseline. There are a couple of options to fix this:

Change the display mode to block

To fix it you can set the image to display: block. Then you can either center the image using margin: auto or make the header a flex container and justify-content: center.

header {
  text-align: center;
  grid-area: header;
}

#header-wrap {
  background-color: red;
}

.header-img {
  display: block;
  width: 50%;
  position: relative;
  margin: auto;
}

<header id="header-wrap">
  <img class="header-img" src="https://i.stack.imgur.com/iqurS.jpg" alt="">
</header>

Override the default vertical-align

You can also fix the issue by using vertical-align: bottom on the image if you want to keep the image inline.

header {
  text-align: center;
  grid-area: header;
}

#header-wrap {
  background-color: red;
}

.header-img {
  width: 50%;
  position: relative;
  margin: auto;
  vertical-align: bottom;
}

<header id="header-wrap">
  <img class="header-img" src="https://i.stack.imgur.com/iqurS.jpg" alt="">
</header>

Header element is not same size as image inside (header does not have defined height)

1 Answers1

Change the display mode to block

Override the default vertical-align