goodly designs for the average tasteful chapPadding vs. Margins
Two properties that are easily confused are margin and padding. They are similar, but certainly not the same. In this tutorial, I will use headers to demonstrate the difference, but the properties can pretty much be assigned to anything.
By default, a header has no padding or margin, like below. Without a visible background color, it is difficult to see the difference between padding and margin, so voila!
Header
Now if we give this header some padding...lets say 20 pixels of it, we get this:
Padding
You'll see there a much greater space between the text and the background that surrounds it. If we gave the header a border instead of a background, we'd see a similar thing--Padding creates space between text and what it is encased in:Padding
Now we'll go back to our default of no padding and give the header a 20 pixels margin.
Margin
The margin property creates space around the element (the header). It wraps around the header, outside of the background or border, as you can see below.Margin
The code that would create a header with padding or a margin looks like the following, where instead of xxx it says either padding or margin, and instead of # there is a number.
h1{
xxx:#px;
}
Additionally, you can assign padding or a margin to a specific side. After the word "padding" or "margin" just add "-top", "-left", "-right", or "-bottom".
Margins are useful to put space between text and a scrollbar, for example, and padding can much improve the appearance of elements.
