margin or padding?

[JWL]

Hello

Suppose I have a div containing headings and paragraphs, and I decide to
add some margin or padding to the left side of the div to create some
whitespace. My question is, in this situation, is there any reason
whatsoever to choose padding over margin or vise versa?

<div id="contentcontainer">
<h1>heading</h1>
<p>para</p>
<ul>
<li>list etc.</li>
</ul>
</div>

#contentcontainer {
padding-left: 2em;
/* Or... */
margin-left: 2em; /* ? */
}

Many thanks.

 

[John Hosking]

Suppose I have a div containing headings and paragraphs, and I decide to
add some margin or padding to the left side of the div to create some
whitespace. My question is, in this situation, is there any reason
whatsoever to choose padding over margin or vise versa?

<div id="contentcontainer">
<h1>heading</h1>
<p>para</p>
<ul>
<li>list etc.</li>
</ul>
</div>

#contentcontainer {
padding-left: 2em;
/* Or... */
margin-left: 2em; /* ? */
}

Not enough information for me. It depends on the (real) content of the
div and on the elements to its left. Text or graphics? Background
colors? Does the div have a border? What margins and paddings do the
neighboring elements have? Etc.

If you're equally happy with the results either way, then, no, there's
no reason to prefer one to the other (except maybe, heh, "margin" is one
character shorter than "padding", so you save on code size LOL).

 

[Jonathan N. Little]

Hello

Suppose I have a div containing headings and paragraphs, and I decide to
add some margin or padding to the left side of the div to create some
whitespace. My question is, in this situation, is there any reason
whatsoever to choose padding over margin or vise versa?

Depends on *where* you want the space!
see:

http://www.w3.org/TR/CSS21/box.html#box-dimensions

You have to consider the context of the application, you suppled not URL
so who would know?

 

[jim]

For longer style sheets, I've pulled my hair out sometimes trying to
figure out why a certain element is not reacting to my placement
rules, only to find out that I've set the parent element with a
padding rule which is affecting the child's margin rule (or other
positioning rules).

I would agree with other posters that it's your preference, however,
it may be wise to set your own personal routine and practice of how
you do enforce spacing rulesets so you do not get confused.

My hunch is that the more prudent practice is to set specific
placement or spacing rules on the child element which you wish to
alter. If the spacing rule is intended to apply to all child elements
of a parent container, then I would think the padding rule would be
set on the parent containing element.

Hope that helps,

Jim

 

[Jim Moe]

Suppose I have a div containing headings and paragraphs, and I decide to
add some margin or padding to the left side of the div to create some
whitespace. My question is, in this situation, is there any reason
whatsoever to choose padding over margin or vise versa?

It depends.
Margin affects the spacing outside of the border. Padding affects the
spacing inside the border.

 

[Neredbojias]

Hello

Suppose I have a div containing headings and paragraphs, and I decide to
add some margin or padding to the left side of the div to create some
whitespace. My question is, in this situation, is there any reason
whatsoever to choose padding over margin or vise versa?

One significant difference is that padding will "propagate" the background
of the div whereas margins will delimit it. Also, top and bottom margins
may merge into adjacent margins, a situation which does not occur with
padding. Thirdly, padding will allow for the placement of absolutely-
positioned elements (within the relative container) "over itself" so to
speak.

I'm sure there are other differences as well.

 

[Jukka K. Korpela]

Scripsit Neredbojias:

One significant difference is that padding will "propagate" the
background of the div whereas margins will delimit it. Also, top and
bottom margins may merge into adjacent margins, a situation which
does not occur with padding. Thirdly, padding will allow for the
placement of absolutely- positioned elements (within the relative
container) "over itself" so to speak.

I'm sure there are other differences as well.

Vertical margins do not affect non-replaced inline elements; vertical
paddings do (though this does not affect line height).

Some elements have default margin or padding. This may depend on browser.
Thus, if you wish to affect e.g. the indentation of a list, you should
always set both padding and margin for both the list element (ul or ol) and
the list items (li elements). Setting just e.g.
ul { margin-left: 0; }
or
ul { padding-left: 0; }
has radically different effects on different browsers.

 

[Knut Krueger]

Just reading margin and padding in lists ...
Is there a way to get the lines (1 and 2) with a <br /> spacing?
<li> line 1</li>
<li> line 2</li>
Its working wiht
<li> line 1</li>
<br />
<li> line 2</li>
buts an error in the validating
regards Knut

 

[Jonathan N. Little]

Just reading margin and padding in lists ...
Is there a way to get the lines (1 and 2) with a <br /> spacing?
<li> line 1</li>
<li> line 2</li>
Its working wiht
<li> line 1</li>
<br />
<li> line 2</li>
buts an error in the validating

LI { margin: 1em 0; }

 

[Knut Krueger]

LI { margin: 1em 0; }

Thanks
uhh then i have to change all li entries, because I do not want this for
all lists.
I have a class in the <UL class=...> not in the <li>

KNut

 

[Ben C]

Thanks
uhh then i have to change all li entries, because I do not want this for
all lists.
I have a class in the <UL class=...> not in the <li>

You can always do:

ul.foo li { margin: 1em 0; }

which means "apply the margin to <li>s that are descendents of <ul>s
with class of foo"

Or

ul.foo > li { margin: 1em 0; }

"apply the margin to <li>s that are children of <ul>s with class of foo"

 

[Knut Krueger]

On 2007-05-28, Knut Krueger <[email protected]> wrote:

You can always do:

ul.foo li { margin: 1em 0; }

which means "apply the margin to <li>s that are descendents of <ul>s
with class of foo"

Or

ul.foo > li { margin: 1em 0; }

"apply the margin to <li>s that are children of <ul>s with class of foo"

Much quicker
Thank you.

.... just laughing over foo - its not common in Germany and I was looking
for a function foo the first time I read this in R-Statistic Language-
and I was searching a long time

 

[Ed Mullen]

Much quicker
Thank you.

... just laughing over foo - its not common in Germany and I was looking
for a function foo the first time I read this in R-Statistic Language-
and I was searching a long time

You'll also sometimes see "bar" (like - ul.foo.bar) as a sample code.
The derivative is from the acronym "fubar" which is sometimes read as
"Fouled Up Beyond All Repair." Commonly used in the U.S. Military.

http://en.wikipedia.org/wiki/FUBAR

 

[Blinky the Shark]

You'll also sometimes see "bar" (like - ul.foo.bar) as a sample code.

Extended, the canonical metasyntactical variables become foo, bar, baz
and quux.

 

[Jukka K. Korpela]

Scripsit Knut Krueger:

Is there a way to get the lines (1 and 2) with a <br /> spacing?

There is no such thing as <br /> spacing. The <br> or <br /> means line
break. Browsers often interpret a lone <br> as a request for empty line, but
don't rely on such (mis)behavior.

Just use margin settings in CSS.

Its working wiht
<li> line 1</li>
<br />
<li> line 2</li>
buts an error in the validating

Certainly it's an error, since nothing but whitespace is allowed between
<li> elements.

Using <li>line<br></li> would be valid but pointless: no particular effect
is guaranteed, and you can affect vertical spacing more easily in CSS.

 

[dorayme]

Browsers often interpret a lone <br> as a request for empty line, but
don't rely on such (mis)behavior.

On all my Mac browsers I don't get an _empty_ line.

 

[Knut Krueger]

On all my Mac browsers I don't get an _empty_ line.

That's a problem - verifying the pages is very difficult.
Firefox f.e is different on Mac and Windows and maybe different on
Linux. Seems that there is a need for at least three systems to test all
possible bugs and variations of the pages ...

Knut

 

[dorayme]

That's a problem - verifying the pages is very difficult.
Firefox f.e is different on Mac and Windows and maybe different on
Linux. Seems that there is a need for at least three systems to test all
possible bugs and variations of the pages ...

Is FF different on Windows cf to Mac? I have so far been
supposing not, thinking that I would have heard by now surely?

 

[Ben C]

Is FF different on Windows cf to Mac? I have so far been
supposing not, thinking that I would have heard by now surely?

I doubt it, but what did you mean by a "[non-]_empty_" line? A line
containing nothing but one line-height's worth of space is what a lone
<br> gives me on my Linux version of FF.

e.g.

<style type="text/css">
div { font-size: xx-large; background-color: pink }
</style>
...
<body>
<div>
<br>
</div>
</body>

 

[dorayme]

Is FF different on Windows cf to Mac? I have so far been
supposing not, thinking that I would have heard by now surely?

I doubt it, but what did you mean by a "[non-]_empty_" line? A line
containing nothing but one line-height's worth of space is what a lone
<br> gives me on my Linux version of FF.

e.g.

<style type="text/css">
div { font-size: xx-large; background-color: pink }
</style>
...
<body>
<div>
<br>
</div>
</body>

I just meant that when one puts in a <br> after a short bit of
text which continues after the <br> and can be seen as say three
lines of text in a div that is suitably width limited, the three
lines are all full of text, none are empty of text. There is no
empty line. But, I suppose, come to think about it, JK was
meaning something very specific about a _lone_ <br>, not merely
_one_ <br>. Perhaps I got the context wrong?

While I am here, both FF and Safari pile up empty <br>s according
to their number. I feintly recall it being said it was not
certain how browsers behaved in this respect. Alas, they seem to
behave as expected thus probably aiding and abetting the poor
practice of using these things for layout.