PDA

View Full Version : padding


gtlanz
10-09-2007, 03:09 PM
hi,
Where i add padding to a box ,it stretches the box to the right. Any help

http://img.photobucket.com/albums/v175/spainboy/BOXES.jpg

body {
margin:0;
padding:0;
}
#box1 {
width:250px;
height:75px;
background-image:url(img/colorbar.gif);
background-repeat:no-repeat;
margin-left:50px;
margin-top:50px;
border: 1px solid #000;
}

#box2 {
width:250px;
height:75px;
background-image:url(img/colorbar.gif);
background-repeat:no-repeat;
margin-left:50px;
margin-top:50px;
border: 1px solid #000;
padding:5px;
}

Jittor
10-09-2007, 04:07 PM
Where are you trying to add the padding, on the text "Box 2"?

Try this

padding: 0px 0px 0px 5px;

gtlanz
10-09-2007, 04:52 PM
hi,
An all round padding of 5px, my point is that, padding should not increase the box. my code is wrong somewhere? .btw I have tried 5px 5px 5px5px;

domedia
10-09-2007, 05:01 PM
my point is that, padding should not increase the box. yes it should.

In web standard browser, padding will *add* to the width of the box, this is how it's supposed to work.

gtlanz
10-09-2007, 05:24 PM
Thanks for the correction. In the CSS box model tutorial it says "Padding seperates the actual box content from the borders. They do not contribute to the width of the box. " , i took this to mean padding would not add to width of the box.
Thanks again.

domedia
10-09-2007, 05:47 PM
Sorry, I confuse myself a little on the semantics here...
You're right, but your example still shows the expected behavior.
The width of the box is the content area. Then padding is added outside of that, and then the border is added outside that.

chriskq
10-14-2007, 11:40 AM
u must remember to minus the padding from the width of the container.
For example, say if u had a flexible content box (no fixed height) and you had 10px of padding on either side. The box is 200px wide, the hacked widt\h is 180px.

the CSS

.contentBox {
width: 200px;
padding: 10px;
widt\h:180px;
border:1px solid red;
etc
}