3 replies [Last post]
eddy
eddy's picture
Offline
Enthusiast
Last seen: 9 years 33 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

Two blocks.
Absolute positioning, same width, height, etc.
One difference: block #1 has 24px padding-left.

Question:
Why does this make the block 24px bigger????

Here's the code:


test


body{
margin:0;
padding:0;
}

#col1{
position:absolute;
top:10px;
left:0px;
width:219px;
height:200px;
background-color:#fff;
display:block;
border:1px dotted gray;
font-family:arial, sans-serif;
font-size:1em;
padding-left:24px;
}

#col2{
position:absolute;
top:220px;
left:0px;
width:219px;
height:200px;
background-color:#fff;
display:block;
border:1px dotted gray;
font-family:arial, sans-serif;
font-size:1em;
}



With padding

Without padding

Anyone who hates kids can't be all bad.
W.C. Fields

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, i cant giv you the

hi,

i cant giv you the theoretical answer, but from experience i can tell you for sure that, padding gets applied inside a element and it is used to add a spacer for ur text etc.. if it is touhcing the border of ur divs. so even if u have given a width it will add the padding and hence increase the height. if you want to space, then you gotta use margins..

@Others... A bit more information???

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Google on box model for more

Google on box model for more information. Dimensions (width & height) in the standard box model only includes content, they don't include padding, borders or margins. There is an alternate box model which does include padding within the specified dimensions. This was the box model used by IE before version 6 (and is still used by IE in quirks mode). It is also usable in some other browsers using appropriate CSS property values.

There are different schools of thought of which is the better way to go. For me, images get really confusing using the other box model. An image's dimension is normally its pixel size - which leaves no scope for padding.

From a practical point of view, it doesn't matter much which is used as long as you do know where your padding needs to be added.

eddy
eddy's picture
Offline
Enthusiast
Last seen: 9 years 33 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

Dimensions (width & height)

Dimensions (width & height) in the standard box model only includes content, they don't include padding, borders or margins.

Ofcourse.
Stupid me.

Thanks both for your time.

Anyone who hates kids can't be all bad.
W.C. Fields