Padding & Margins [was: Re: Style Sheet Equiv Question]

Darrell,

Thanks for the detailed explaination! However, I'm still a little =
confused here (surprise!)...

You write that padding is "the space between the border of an element =
and the content of that element." So, based on that, I understand that =
if I were to make a 100px x 100px transparent GIF or PNG and then put a =
1px border around it with 10px padding all around, I would get a 120px =
square. Is that correct? Conversely, with margins being "the space =
between the border of an element and the adjacent elements or content," =
with the same setup, I would get a 100px square with 10px of space =
outside the box. Right?

To verify, I just popped open HomeSite and tested the above using the =
desrciptions I provided, and it seems I understand what you say. So far =
so good.

My question, then, is this: I can see how using margins on block-level =
elements such as DIVs should be used, maybe even on Ps and stand-alone =
IMGs and other similar elements, but for an inline image where the text =
is to wrap around the image (such as the case for some of the images on =
my site), shouldn't padding be the better choice? I know this has gotten =
completely off the mark of where this thread started, so I changed the =
subject line, but it's still a question I think is important, because I =
agree with your comment about how webdesign is getting more and more =
complex, getting to the point, and in some cases surpassing print layout =
complexity. I have been striving for removing all but HTML-level =
elements from my actual HTML pages, trying to use an external CSS as =
much as possible, and this is one area that is still fuzzy to me: when =
is the use of margins appropriate, and when should padding be used =
instead? All my designs thus far are for visual sites, but there will =
come a day when that will likely change, and I'd like to be ready for =
it, not getting bad habits now.

My personal understanding of padding and margins, your descriptions =
aside, is this:

Margins define the size or area of a block-level element. If I have a =
page that is set in the BODY element to be 0px margins and 0px padding, =
I want a margin of some sort on the top, left, bottom, and right to keep =
the text from butting up against the edge of the browser window. I think =
of margins as a cardboard box in this case.

Padding, on the other hand, is space placed around elements within that =
defining block-level element, used to keep things from touching. This =
would be the styrofoam peanuts or newspaper stuffed into the cardboard =
box to keep the things I put in there safe.

Would my analogy be correct, or am way off-base here?

Thanks in advance,
Kehvan

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::=

:: NORTON ANTI-VIRUS 2002 scanned this email prior to sending. It is =
free
:: of any known embedded or attached viruses, trojans, or internet =
worms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::=



----- Original Message -----=20
From: "Darrell King" <darrell(at)webctr.com>
To: "HWG Techniques" <hwg-techniques(at)hwg.org>
Sent: Sunday, March 10, 2002 04:38
Subject: Re: Style Sheet Equiv Question


> The padding is the space between the border of an element and the =
content of
> that element.
>=20
> The margin is the space between the border of an element and the =
adjacent
> elements or content.
>=20
> It seems to make more sense to me to use margin with HTML's img tag, =
as
> there may not be any padding between the border of an image and the =
image
> content, but there might be space between the border and the adjacent
> elements or content (such as your text.)
>=20
> In CSS presentation, more so than with older HTML presentation, I =
think
> there is a need to understand more than just validation or "it =
works!".  I
> believe we need to understand a higher level of structural detail than =
ever
> before, as we are moving into layout scenarios as complex as any the =
print
> industry has ever tackled...with platform issues thrown in to keep it
> interesting!
>=20
> Padding and margin often give similar visual effects, but are =
structurally
> different properties.  Perhaps I am being too concerned over tiny =
details
> here, but I have a feeling they are going to be important...
>=20
> D
>=20
>=20
> ----- Original Message -----
>=20
> Margins, padding... I guess on the site I'm working on, where I'm =
trying to
> keep everything validating to XHTML Strict, the two act about the =
same. In
> my use, I've been using margins for just that: margins, and using =
padding
> for adding space around things I don't want bumping into each other... =
To be
> honest, I can't actually think of any explicit differences between =
Margins
> and Padding... they both seem to do the same exact thing, unless I'm =
drawing
> a border or line, where they do affect where that is placed...
>=20
>=20
>=20
>=20

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA