Back to the Basics: HTML Padding & Margins

We are going to go back to basics and talking about margin and padding properties again, expanding on a previous post by Valentin Garcia.

When we start styling an HTML element with CSS, it is treated like a box by default. Border, margin, and padding are properties that affect the appearance of the box’s edges. Very simply, margin is the area on the outside of a box’s border and padding is the area on the inside of a border. The purpose, mostly, is to add space between elements for better design and readability.

Ready to dig in? Let’s get started.

Let’s make a few divs with classes that we are going to use for styling some Lorem Ipsum content.

<div id="ost-container">
 <div class="fleft w25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar luctus risus, ac mattis orci feugiat quis. Etiam ac aliquet tellus, ac sodales dui.</div>
 <div class="fleft w25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt a risus ac sagittis. Quisque tincidunt maximus fermentum. Donec a purus massa.</div>
 <div class="fleft w25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus arcu ante, id luctus ante scelerisque quis.</div>
 <div class="fleft w25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra consequat interdum. Quisque scelerisque orci vel blandit vehicula.</div>
</div>

Now we can add some simple styling.

/* Not relevant to the lesson. Just setting up a parent div with a max width. */
 #ost-container{
 max-width: 870px;
 margin: 0 auto;
}
/* Floating to make the blocks stack side-by-side. */
.fleft{
 float: left;
 text-align: left;
}
.w25{
 width: calc(25% - 23px * 2); /* Ignore the calc for now. We will talk about it soon. */
 min-height: 100px;
 font-size: 12px;
}

Not very pretty is it? Everything is all squished up together. Let us add a border, padding, and margin one at a time to the .w25 class selector. First, add border: 3px solid #000;.

Ok, Now we can see the edge of the boxes. Padding will add space between the border and the content within the box, so let’s add padding: 10px;.

Some space between the boxes will be nice, so add in margin: 10px to finally complete the .w25 selector.

.w25{
 width: calc(25% - 23px * 2); /* Ignore the calc for now. We will talk about it soon. */
 min-height: 100px;
 font-size: 12px;
 margin: 10px;
 padding: 10px;
 border: 3px solid #000;
}

That’s better looking. We can easily see the four elements and the content within them.

Let’s discuss what is happening:

1. The margin and padding is affecting the first block, and because we are using the same class on all blocks, they will all be spaced the same.
2. We are using shorthands for some of our styling. For example, margin: 10px; is the same as margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;. And, margin: 20px 10px; is the same as margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px;. Everyone probably guessed by now that margin: 1px 2px 3px 4px; would also style all four corners in the same order of top, right, bottom, and left. That’s not today’s lesson, but it’s a quick look at shorthands if anyone was lost.

Now, everyone is probably curious about the calc in the width value and we are going to discuss that, but first, we are going to create a larger example to work with. Let’s mock up something that will look a bit more like a typical website header.

<div id="ost-container">
 <div class="fleft w100">Header Title</div>
 <div class="fleft w50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu sollicitudin tellus, quis commodo odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus.</div>
 <div class="fleft w50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dui arcu, faucibus nec scelerisque vitae, rutrum ut diam. Quisque at magna scelerisque, efficitur diam a, volutpat nunc. Etiam in mauris.</div>
 <div class="fleft w25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar luctus risus, ac mattis orci feugiat quis. Etiam ac aliquet tellus, ac sodales dui.</div>
 <div class="fleft w25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt a risus ac sagittis. Quisque tincidunt maximus fermentum. Donec a purus massa.</div>
 <div class="fleft w25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus arcu ante, id luctus ante scelerisque quis.</div>
 <div class="fleft w25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra consequat interdum. Quisque scelerisque orci vel blandit vehicula.</div>
</div>

• Add our container CSS again.

#ost-container{
 max-width: 870px;
 margin: 0 auto;
}

• Very quickly, we are going to add in some styling for floats, background colors, and fonts for an overall look and feel.

.fleft{
 float: left;
 text-align: left;
}
.w100{
 width: 100%;
 height: 200px;
 line-height: 200px;
 font-size: 70px;
 background: #ed8034;
 text-align: center;
}
.w50{
 width: 50%;
 min-height: 70px;
 font-size: 14px;
 background: #feb123;
}
.w25{
 width: 25%;
 min-height: 100px;
 font-size: 12px;
 color: #ffffff;
 background: #2184cd;
}

Just like before, we are back to the point where we start adding in border, padding, and margin.

.w100{
 width: 100%;
 height: 200px;
 line-height: 200px;
 font-size: 70px;
 background: #ed8034;
 text-align: center;
 border-bottom: 1px solid #000000;
}
.w50{
 width: 50%;
 min-height: 70px;
 font-size: 14px;
 background: #feb123;
 padding: 5px;
}
.w25{
 width: 25%;
 min-height: 100px;
 font-size: 12px;
 color: #ffffff;
 background: #2184cd;
 margin: 20px 10px;
 padding: 10px;
 border: 3px solid #000;
}

Uh oh, that’s not right!

A promise was made that we would return to the calc in the width property. This allows us to do simple math with our property value. The reason it is there is because border, margin, and padding sizes are added to the total size of the box.

Let’s look at the w50 divs.

In the CSS, we have padding: 5px;, but the width is 50%. The moment we add padding the width of the div becomes 50% plus 10px, 5px for both left and right. This one is easy. We can just calc 50% minus 10px, and our boxes will stack side-by-side once again as width: calc(50% - 10px);.

The w25 is a little more complicated. We have to calculate for margin, padding, and border. Let’s tally up the score then shall we. There is a margin: 20px 10px;. Remember, this is shorthand, and we aren’t concerned with the top and bottom numbers so that’s 10px on both sides. Another 10px on both sides with padding: 10px;.

Finally, 3px on each side for the border. We could just right it as width: calc(25% - 46px);, but our equations do not need to be short and we can let calc handle some of the math for us with width: calc(25% - 23px * 2);.

So, our final CSS will look like this.

/* Not relevant to the lesson. Just setting up a parent div with a max width. */
#ost-container{
 max-width: 870px;
 margin: 0 auto;
}
/* Floating to make the blocks stack side-by-side. */
.fleft{
 float: left;
 text-align: left;
}
.w100{
 width: 100%;
 height: 200px;
 line-height: 200px;
 font-size: 70px;
 background: #ed8034;
 text-align: center;
 border-bottom: 1px solid #000000;
}
.w50{
 width: calc(50% - 10px);
 min-height: 70px;
 font-size: 14px;
 background: #feb123;
 padding: 5px;
}
.w25{
 width: calc(25% - 23px * 2);
 min-height: 100px;
 font-size: 12px;
 color: #ffffff;
 background: #2184cd;
 margin: 20px 10px;
 padding: 10px;
 border: 3px solid #000;
}

Well, we turned something simple into a bit of an exercise; however, border, margin, and padding are used in most elements. As visually prevalent as borders are, margins and padding are the power behind most websites white space between elements and content.

Here is a link to this exercise recreated on CodePen for everyone to edit and learn without worry.

Feel free to ask any questions.