Struggling to understand padding in css when defining using % values

Question

I wonder if this is very stupid to ask but I am asking anyway because I haven't found the answer anywhere to my satisfaction yet.

I am trying to make a responsive page where I want to define padding of a div called content which contains another div as "text" and is sitting inside another div element called container which has predefined height and width and position: relative. Now the problem is that I defined padding: 45% 45%; and it works very well on the width by taking the root value of the parent container but it flush outside the parent when it comes to height

.container
{
 box-sizing: border-box;
  position: relative;
  border: 1px;
 height: 100px;
 width: 600px;
  margin:0 auto;
}

.content{
    background-color: skyblue;
    padding: 43% 43%;

}
#textlogo {
 font-size: 4em;
}

<div class="container">
  <div class="content">
  <div id="textlogo">Text</div> 
</div> </div>

If you don't want padding on you vertical direction just use "padding: 0 45%;" or padding-left: 45%; padding-right: 45%; — Mosia Thabo, Jun 06 '19 at 18:06
yes, I guess if I understood you correctly. However, I don't want the container div to extend beyond 300px — Suomi, Jun 06 '19 at 18:07
No, actually I want the padding on all sides in such a way that the content is squeezed automatically in the center. — Suomi, Jun 06 '19 at 18:08
padding in percentage is relative to **the width** of the parent even the top/bottom ones .. so all the sides are equal like you can notice — Temani Afif, Jun 06 '19 at 19:18
Thanks to all of you for helping me out on this. It was a life saver, I can finally move on to find a new problem ...lol — Suomi, Jun 09 '19 at 08:29

Mosia Thabo · Answer 1 · 2019-06-06T19:00:36.033

1

Your issue seems to be with the box-sizing,

Set box-sizing: padding-box, this way the browse calculates the total width of the element together with the padding and it will clear off any overlay. Your padding is also a bit high and it's causing the problem.

You must note that the flushing is likely caused by your font-size: 4em. This is a large font and it will force the content div to extend in order to accommodate it #textlogo content..

edited Jun 06 '19 at 19:00

answered Jun 06 '19 at 18:10

Mosia Thabo

4,009
1
14
24

1

Thanks for the reply, sorry I forgot to mention that I am using box-sizing: border-box and it still doesn't work. Also, I have absolutely no problem defining the padding values using "px" but instead i want to define using % to get the content inside in center but its not working vertically at all. – Suomi Jun 06 '19 at 18:29
can you please have a look at the code I shared? – Suomi Jun 06 '19 at 18:35
Here in the code, you can see the problem, even though the height of the container div is set to 100px but when you open on the browser, it basically expands to "Npx" size. However with width it works flawlessly without any problem which I don't understand why? – Suomi Jun 06 '19 at 18:49
The problems is because you've set a very large padding. That padding extends the width of content because #textlogo is also playing a role. try reducing your padding, but either way box-sizing is your solutions. Unless you want to hide flushing by using `overflow: hidden or auto` – Mosia Thabo Jun 06 '19 at 18:54

score -1 · Answer 2 · answered Jun 06 '19 at 18:51

You should very rarely use the padding property in CSS. Going all the way back to Internet Explorer 4 margin worked correctly.

Use margin on the child element instead of padding on the parent. If you use padding on the parent it automatically effects all the child elements. You can "blanket" apply margin to all child elements by using #parent > div selector in example and then cascade secondary margin for individual elements you need to adjust.

You should use padding if there are no child elements or you're dealing with bugs in rendering engines or the standards themselves (e.g. when implied "logic" is used instead of direct (actual) logic).

As Mosia mentioned there is the box-sizing property and while support at this point is pretty much universal if you want to learn CSS the way it was originally intended I wouldn't recommend that shortcut as it will rob you from a true understanding of the code.

Thanks for the answer, initially I was using something like margin on the child element and I came up with the problem that child was using the margin from the body so it moved the whole parent div also and the solution of which I figured out just a day before yesterday that how defining some border or padding can help to solve that problem. Coming on to the use of padding, it was just for the sake of learning only. However, I want to thank all of you for all the information gives me the confidence that I won't stuck in my journey of learning web development. : ) — Suomi, Jun 09 '19 at 08:27

Struggling to understand padding in css when defining using % values

2 Answers2