Is padding property and width-height property are interrelated?

Hi there

I have a question that is giving padding to a block its height is also effected

My Simple question is If I have divide a div call div A in two part “sub-section1” and “sub-section-2”

and I have given then “sub-section-1” width-70% and

:sub-section-2" width-30%

and suppose I want to give padding-left in “sub-section-2” as 10px(suppose) in that case I need to reduce width of “sub-section-2” to some amount to make layout responsive as before

is this necessary to consider these two property as Inter depend?

Hi,

You need to understand the CSS box model which really should have been the very first thing that you learned as you can’t really do anything until you understand this concept.

An elements dimensions are calculated by combining its specified width, padding and borders to arrive at a final size. Therefore if you have an element that is width:100% and then you add 20px padding the element will in fact be too big to fit inside its containing block and will overflow.

As with your example if you have a 70% width and a 30% width then you add padding or borders then those elements will no longer fit side by side as they will be too wide.

You could instead add an inner element inside the parent and apply the padding and borders to that inner element.

Another way without using extra divs is to change the box model by using ‘box-sizing’ and you can change the model to ‘border-box’ which means that when you add padding or borders then they are added inside the specified width of the box and do not add to the overall size. This property is supported in IE8+

Indeed it is becoming popular to reset the whole document to use this model now that support for ie7 and under can be dropped.

html {
  -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

The above code will change it so that all elements use the border-box model and padding and borders are created inside the width of the element and not added to it.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.