Background - Padding and Margin
First, we must understand that all content has a property called “border”. For most content, you will not physically see the border, but it is there. Much like a property line between houses, there are boundaries between object and space. When we modify border properties with css we can see the border around our content visually. We have two main ways of influencing the spacing of our content and our border. These are called “padding” and “margin“.
Padding is the space between the content and the border. Margin is space between the border and any other piece of content outside of the area. For the purpose of this tutorial we are going to focus on the padding property. While both margin and padding are equally important, designers tend to solve problems with padding more as padding is within the content boundary. Margin is only space; we cannot do anything with it other than create space.
Moderate Padding Example
Let’s take a look at a stylized content area that we want to use for a layout:
Now, we need to account for all aspects of the area so we see it entirely and account for the subtle elements that extend past the area like the shadowing. This image is 220px x 220px. This means that we need to make sure the area within our border is 220px x 220px. Look back to our previous chart of margin and padding we see that the space within the border is all of the content plus all of the padding.
Content + Padding = Style Area
Content + Padding + Margin = Total Area
This is true for both dimensions (height and width). So when we go to code the element, we are going to account for showing the background within the style area like so:
.tutorial_padding_moderate {
height:180px;
width:180px;
padding:20px;
background:url(/tutorials/css/padding_base.png) no-repeat;
font-size:10px;
}
This will leave us with a content area within the boundaries of the image like this:
Then using this html code:
<div class="tutorial_padding_moderate">
<ul>
<li>Something in a list</li>
<li>Something in a list</li>
<li>Something in a list</li>
<li>Something in a list</li>
<li>A Sub List
<ul>
<li>Something in a sub list</li>
<li>Something in a sub list</li>
</ul>
</li>
<li>Something in a list</li>
<li>Something in a list</li>
</ul>
</div>
We can get results like this:
- Something in a list
- Something in a list
- A Sub List
- Something in a sub list
- Something in a sub list
- Something in a list
Look for the second part of this tutorial soon!
