Understanding Margin, outline, Border and Padding in CSS easy way

Hey friends, these CSS properties- margin, outline, border and padding have a nice difference and relationship among themselves which may confuse the beginners. So, take care, this is not an advanced discussion. We’re going to clarify them part by part with visual example. Sure! You’re going to enjoy.

Let’s start journey–

Before that, make sure, you have a rough understanding of basic CSS.

First, take a container div. You know DIV is a block level element which can contain all Block-level as well as inline html elements like p, table, ul, ol, img, form, h1, h2 etc. and even div itself.

For example purpose, we take a div with simple border with a p element inside it.

CODE

<div style="border: 1px solid black;width:100%;"> 
<p> </p>
</div>

First we styled the div with border and width property only in need of visuality. Our discussable Border will come later. See output:

OUTPUT

Now put a Background background:pink with p to figure it out.

CODE

<div style="border: 1px solid black;width:100%;"> 
<p style="background:pink;">
Get clarified with margin, outline, border and padding </p>
</div>

OUTPUT

Now we wish that we put margin, outline, border and padding around Paragraph (p) element- all inside thediv .

But before entering visual example, let’s look at the theoretical approach of these four properties at a glance.

Around an html element, from outside to inside, first comes margin and then others. All these four properties sits as sequentially as shown below:

• margin
• outline
• border
• padding

Remember:

• Margin and Padding are just white space and cannot be styled with color.
• Outline and Border can be styled with the property style, color and width.
• Padding is space usually around content especially text or image. Padding can also be used around html element.
• Padding occupies the space of content area inside content. So, Padding is also colored with content background-color.
• outline occupies the space of margin area outside border. So outline value must be equal to or less than margin value.

Let’s enter example:

Margin

First, put margin: 50px with p.

CODE

<div style="
border: 1px solid black;
width:100%;"> 
<p style="background:pink;
margin:50px;">
Get clarified with margin, outline, border and padding </p>
</div>

OUTPUT

Clearly the 50px width takes the white space between Div border and paragraph. This is margin.

Outline

Second, put outline property with p. Put width:30px, style:solid and color:gray. Shorthand property of these three looks as outline: 30px solid gray. See code:

CODE

<div style="
border: 1px solid black;
width:100%;"> 
<p style="background:pink;
margin:50px;
outline:30px solid gray;">
Get clarified with margin, outline, border and padding </p>
</div>

OUTPUT

Obviously, this 30px gray-colored portion is Outline. This outline has taken the space (30px) from 50px-margin. So, we see, only 20px white margin-space is left.

Border

Third, set border around p element. Border shorthand property is similar to that of outline. So, put border:20px solid darkgreen. This will create 10px wide solid darkgreen-colored border.

CODE

<div style="
border: 1px solid black;
width:100%;"> 
<p style="background:pink;
margin:50px;
outline:30px solid gray;
border:20px solid darkgreen;">
Get clarified with margin, outline, border and padding </p>
</div>

OUTPUT

We see 20px darkgreen-colored space around paragraph-background inside Outline. This is border.

Padding

Lastly, to set Padding, put padding:40px around the content (text).

CODE

<div style="
border: 1px solid black;
width:100%;"> 
<p style="background:pink;
margin:50px;
outline:30px solid gray;
border:20px solid darkgreen;
padding:40px;
color:navy;">
Get clarified with margin, outline, border and padding </p>
</div

OUTPUT

We see content texts have left 40px from all top, bottom, left and right. This is padding. This Padding has occupied the space of content area and thus become colorful with the color of content background.

Hope, friends, you have come out of all-out hesitation, confusion, complication and hassle about Margin, Outline, Border and Padding after going through this article.

Comment, please!