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

As I understand it:

Margin is the distance between the outside walls if the box and anything
that is near that box.

Padding is the space between the inner walls of the box and the stuff inside
that box.

This seems to be what you are saying below.  So, if we had a div enclosing
an img, and the div had a padding of 5px, then the div's inner wall would be
5 pixels from the image all the way around the periphery.

Where I was falling short is the concept of padding within an img tag.  With
my legacy HTML thinking (I am old), I was equating the img tag with the
image itself, and trying to imagine the padding being applied within the
actual graphics file as it is rendered...:).  However, if I look at the img
tag as an element with some properties similar to block-level elements, I
could see where you are going with the use of padding.

D

----- Original Message -----
From: "Kehvan M. Zydhek" <kehvan(at)zydhek.net>

Darrell,

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


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.

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