ansaurus

Question

CSS Padding - Apparently I missed something

Answer 1

+5 A:

You need to change the width to 800px and then add your padding. Padding is additive to the width.

    W------W   - original width
   PW------WP  - original width plus padding either side
    PW----WP   - smaller width plus padding either side

Box model courtesy of Can Berk Güder

Garry Shutler 2009-04-02 08:51:40

Was unaware it worked this way. What an obvious solution. Thanks!

Tom 2009-04-02 08:56:51

Answer 2

A:

You could also add a margin to anything inside the div:

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>

ck 2009-04-02 08:57:33

Thats not really going to work is it, think about it.

Andrew Bullock 2009-04-02 08:58:51

Yeah, that's a bit dangerous as it will add a margin to EVERYTHING in the div.

Garry Shutler 2009-04-02 09:00:04

@Andrew Bullock: Why not? @Garry Shutler: Yes it will add a margin to everything, but if you know you are only adding one thing its ok, and the OP wanted to think about it as a div of width 800 with a 50px gap before text.

ck 2009-04-02 09:24:23

Answer 3

+2 A:

What garry said, If youre using Chrome or Firebug plugin for Firefox you can right click and "inspect element" and see a visual representation of how your elemenent is being sized, really helps in these situations.

Andrew Bullock 2009-04-02 08:58:10

Answer 4

A:

The affects of adding padding or margin to an element depend entirely on the browser you're viewing the page in. Padding and margin SHOULD be additive as Garry says but that's not the case with IE6 so you'll need to do some research around browser differences and how you can accommodate them in your style rules.

From what it looks like your doing you just want a padding to be applied to the whole page. You could do that by directly referencing body in your CSS. so you'll have -

body
{
    padding:0 50 0 50;
}

Stimul8d 2009-04-02 08:58:42

ansaurus

tags:

views:

answers:

CSS Padding - Apparently I missed something

related questions