css(padding-top VS height)

css(padding-top VS height)

by avenge » Sat Dec 29, 2012 2:49 pm

My code:

h1
{
background-color:pink;
border-width: thick;
border-style: dotted;
border-color: gold;
height:10cm;
}

After adding the padding to the above code:

h1
{
background-color:pink;
padding-top:1cm;
border-width: thick;
border-style: dotted;
border-color: gold;
height:10cm;
}

As you can see my code before padding, i declared the height as 10cm for "h1" (heading element),But after padding-top, i found that the height of the (heading element)box increased to some extent,So i guess the padding over rules the height.??????...10 cm (height) + 1 cm(paddin-top)=11cm(total height of h1)...if am right..???

Re: css(padding-top VS height)

by avenge » Sat Dec 29, 2012 6:35 pm

Hey thanks for the reply,yes i know we should use em's and %,the font size of the site will be scaled better for cellphones and pc's automatically.i know the concept,i used cm's in my question because i wanted to explain it clearly,even if i use px the size of the the background heading increases.i just assumed that when we declare height and width of any element(in my example h1 heading),i thought it would not change forever,it would be static,but i was wrong the height of the element changes if i apply padding,if i give value of padding greater than the height of the element,it becomes really big.i thought it wouldn't happen like that but it just did.Am learning css from here,and am really enjoying it...i got this doubt when i came reading about the Box Model....:)

Thanks