Larger bass padding than defined in CSS

Question

Larger bass padding than defined in CSS

Asked 6 years, 5 months ago

Viewed 134 times

5

I have a situation where I define the padding of a div within the header with:

#header_inn{
   padding: 5px 2%;
   width: 96%;
}

I want them to paddings top and bottom have exact 5px, but the bottom gets bigger, different from the top, which is with the 5px, but the bottom got double, 10px (measured in Photoshop).

Behold:

Why the padding bottom gets bigger? What am I doing wrong or failing to do to generate this unwanted and inaccurate space?

Follows the code:

body{
   margin: 0;
   background-color: #000;
   font-size: 20px;
   color: #fff;
}

header{
   background-color: #51090e;
   border-bottom: 1px solid #7e0e16;
}

footer{
   background: green;
}

#header_inn{
   padding: 5px 2%;
   width: 96%;
}

#header_inn img{
   height: 53px;
}

<header>
   <div id="header_inn">
      <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   </div>
</header>
<main>
   main
</main>
<footer>
   footer
</footer>

I think this is where you needed help, right. But there’s no better answer than Guilherme’s. There are hours that I myself come to consult here a response I already gave and I can’t remember how I had solved rss. []s

– hugocsl

2018/06/12 at 11:25
Man these days I’m hardly going into the night, but during the days I’m in the area, what’s one thing to say.

– hugocsl

2018/06/13 at 11:08
Guy just like that I never did, but with transition vc can play a little with http://cubic-bezier.com to see if you arrive at a result that suits you. If it doesn’t suit you and you need exactly X time to go and 2X time to come back I think using two @kayframes one on :Hover and the other when taking the :Hover might be that you can, but then you have to test because I never did exactly like this.

– hugocsl

2018/06/13 at 18:17
1

Blz... I’ll post a question then. Obg!

– Sam

2018/06/13 at 18:28
Funny, isn’t it? Acceptance undone after months, with no new response, because you say you don’t take things personally, or you say you don’t mix things up, and strangely it was after that post in Meta. It’s good to know, so I won’t lend myself to helping you with any of your questions.

– Guilherme Nascimento

2018/08/09 at 13:05

1 answer

Browser other questions tagged css padding

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2018-06-12T01:22:59+00:00

This is because the tag img by default uses display: inline;, so the behavior is not as of blocks, this spacing would be a spacing as occurs in texts, ie the <img> accompanies the alignment of the paragraph, so this spacing below is because the image will behave as if it were on the line, if you change the vertical-align will even notice that he changes position.

An example more or less to understand what happens, would be this:

In the case of this font used in the image, the line would be the paragraph, the image aligns well on top of this, note that in the case of G and g they are also on top, but with part that goes down.

If you put a display: block; (will also work if you use float:) will notice that it works as almost as you wish:

body{
   margin: 0;
   background-color: #000;
   font-size: 20px;
   color: #fff;
}

header{
   background-color: #51090e;
   border-bottom: 1px solid #7e0e16;
}

footer{
   background: green;
}

#header_inn{
   padding: 5px 2%;
   width: 96%;
}

#header_inn img{
   height: 53px;
   display: block; /* bloco */
}

<header>
   <div id="header_inn">
      <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   </div>
</header>
<main>
   main
</main>
<footer>
   footer
</footer>

Another attempt at solution would be to apply font-size: 0 in the parent element from where the image is, thus:

body {
   margin: 0;
   background-color: #000;
   font-size: 20px;
   color: #fff;
}

header{
   background-color: #51090e;
   border-bottom: 1px solid #7e0e16;
}

footer{
   background: green;
}

#header_inn{
   padding: 5px 2%;
   width: 96%;
   font-size: 0;
}

#header_inn img{
   height: 53px;
}

<header>
   <div id="header_inn">
      <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   </div>
</header>
<main>
   main
</main>
<footer>
   footer
</footer>