Margins versus padding

[Michael Laplante]

I've got a graphic in a DIV. Best way to provide some space on the left (of
the page)?

Margins, padding or somehow locate the div itself?

Any browser specific issues you're aware of? I don't have Safari or Opera.

The idea is to maintain a 250 px wide gutter down the left side of the page.

M

 

[Jonathan N. Little]

I've got a graphic in a DIV. Best way to provide some space on the left (of
the page)?

Margins, padding or somehow locate the div itself?

Any browser specific issues you're aware of? I don't have Safari or Opera.

The idea is to maintain a 250 px wide gutter down the left side of the page.

Why does you try referencing the spec first?

www.w3.org/TR/CSS21/box.html

 

[Jose]

The idea is to maintain a 250 px wide gutter down the left side of the page.

The whole page? Why do you want to waste all that space on my machine?
I may only be giving you 400px to work with, and you would have
trashed more than half of it.

Are you filling that space with something else?

Jose

 

[Blinky the Shark]

Any browser specific issues you're aware of? I don't have Safari or Opera.

Opera is a download away.

 

[Michael Laplante]

Michael Laplante wrote:

Why does you try referencing the spec first?

I read a few tutorials on the box model. My concern was application.

Is there any sort of design consideration that makes a designer choose one
over the other?

Perhaps there's none at all, I don't know.

M

 

[Michael Laplante]

The whole page? Why do you want to waste all that space on my machine? I
may only be giving you 400px to work with, and you would have trashed more
than half of it.

Are you filling that space with something else?

There's a graphic that runs down the side of the page. It's dark so print
wouldn't show up easily.

M

 

[dorayme]

I've got a graphic in a DIV. Best way to provide some space on the left (of
the page)?

Margins, padding or somehow locate the div itself?

Any browser specific issues you're aware of? I don't have Safari or Opera.

The idea is to maintain a 250 px wide gutter down the left side of the page.

M

A good way to make a block like a div sit 250 pixels away from
the left of its container is this:

div {margin-left; 250px}

This is very abstract advice because when you apply it, you need
to avoid buggering things up by careless or naive use of
container specs (the box that holds the div and anything you have
on the left).

 

[Jose]

There's a graphic that runs down the side of the page. It's dark so print

wouldn't show up easily.

If the graphic is not essential to the content of the site, you might
want to re-think it. Pretty design is ok for paper, but on a computer
screen whose parameters you do not control, taking a sizable fraction of
prime real estate (the left side!) is probably not a great idea.

If the graphic -is- essential to the content, then the above probably
doesn't apply. In any case, sorry, I don't actually know how to do what
you need, but others here do.

Jose

 

[Neredbojias]

To further the education of mankind, "Michael Laplante"

I've got a graphic in a DIV. Best way to provide some space on the
left (of the page)?

Margins, padding or somehow locate the div itself?

Any browser specific issues you're aware of? I don't have Safari or
Opera.

The idea is to maintain a 250 px wide gutter down the left side of the
page.

In head:

<style type="text/css">
body {
margin:0;
padding:0 0 0 250px;
}
</style>

 

[Toby Inkster]

Is there any sort of design consideration that makes a designer choose one
over the other?

padding is inside the box and will assume the same background as the rest
of the box. margin is outside the box so has a transparent background,
allowing the parent's background to show through.

 

[dorayme]

A good way to make a block like a div sit 250 pixels away from
the left of its container is this:

div {margin-left; 250px}

sorry... : not ;

 

[Jonathan N. Little]

padding is inside the box and will assume the same background as the rest
of the box. margin is outside the box so has a transparent background,
allowing the parent's background to show through.

Looking up padding and margin a w3.org first then a little
experimentation can go a long way...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Margin VS Padding</title>

<style type="text/css">

..bymargin, .bypadding {
border: 1px solid red;
color: black;
background-color: yellow;
}
..bymargin {
margin: 100px;
padding: 0;
}
..bypadding {
margin: 0;
padding: 100px;
}
</style>
</head>
<body>
<div class="bymargin">DIV by margin...</div>
<div class="bypadding">DIV by padding...</div>
</body>
</html>

 

[Michael Laplante]

padding is inside the box and will assume the same background as the rest
of the box. margin is outside the box so has a transparent background,
allowing the parent's background to show through.

Now's there something that wouldn't have jumped out at me. . . thx.

M