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
Get clarified with margin, outline, border and padding
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
Get clarified with margin, outline, border and padding
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
andwidth
. - 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 ofmargin
area outsideborder
. 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
Get clarified with margin, outline, border and padding
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
Get clarified with margin, outline, border and padding
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
Get clarified with margin, outline, border and padding
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
Get clarified with margin, outline, border and padding. The proper knowledge of margin, outline, border and padding will help you design your website fantastic way. You can use these four properties with any HTML element even in WordPress environment. For this you have to add a Custom HTML block in the WordPress Gutenburg editor.
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!