10.Padding


#1

When i set the dimensions of < div > box it is perfect,but as soon as i change the padding, the dimensions get changed and becomes larger, how come?
Padding is supposed to be inside border then how is padding affecting the dimensions?

I had dimensions-
width=100px
height=50px

Then when I changed padding to 40p, the box gets enlarged and doesnt keep its dimensions. how come?


#2

that is padding? padding is the spacing inside the box. You can counter this issue with box-sizing, by default box-sizing is set to content-box, from MDN:
This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}

to make padding and border part of the box width and height use border-box value for box-sizing property


#3

Then suppose I create 2 boxes, 1 with dimensions:-
width:100px
height:50px
padding:40px

And another with dimensions:-
width:140px
height:90px

will they be of the same sizes?


#4

no, they will not. it should be:
width:100px
height:50px
padding:40px
and then the second box:
width:180px
height:130px (thanks to @drona6985, i made a math error)
you have padding-top 40px, padding-bottom 40px and same for left and right


#5

Awesome! Okz I got it now.
Thanks a lot :grinning:


#6

if the dimensions are:
height:100px
width:100px
padding:50px

will this bring the text to center of the box if not what should be the value of padding to do that and can it be done through some other way? please help !!!


#7

That depends on the height of the text, and more. I highly recommend this guide, which does an excellent job at explaining this


#8

what it would be for the text " yo yo ",thanks for the link.


#9

i know its foolish to ask it now as i should have asked it in my earlier comment but could you please explain how you got the dimensions of second box?


#10

i would use box-sizing: border-box to make it yourself a whole lot easier. If you have 100 by 100px and box-sizing: border-box, and the text is 20px in height, the padding-top would be 40px

You mean how i got these dimmensions:

well, simple. Let's say i have a 100 by 100px box, and adding padding-top: 20px and padding-bottom: 20px my box would be 100 x 140 (20 (padding top) + 100 (box height) + 20 (padding bottom), i where to add padding-left: 20px and padding-right: 20px, the box would be 140 by 140


#11

but height of the second box is 150px should not it be 130px according to what you explain.


#12

40 + 50 + 40 = 130, indeed. Oops, my mistake, i made a horrible math error, nice catch


#13

thanks dude for all the discussion ,you were a great help.


#14

even i make mistake, know lets talk about box-sizing: border-box, this will make the border and padding part of the height and width of the element, so i if we have this:

<div>center</div>

and then css:

div {
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  background: aqua;
  padding-top: 40px;
  text-align: center;
}

the box will still be 100px in height, and your text will centered. you can read more about box-sizing here


#15

yup it worked!!! i just tried it and it worked thanks a very lot for all the help throughout ,this really cleared a lot of concepts for me.