How to add padding and margin in CSS

Introduction

Are you still confuse with margin and padding in CSS. Don’t worry you are not alone. In this post, you will find crystal clear concepts and information about margin and padding in CSS. So, you don’t have to read any other article about margin and padding. This concept is applied to almost every software technology. So, let’s start with understanding the margin in CSS.

What is Margin

The margin property in CSS which gives you control over an HTML element to manipulate their size and give some space around the element.

So, you can make outer space in the elements you want. Like if you want to give some space on the left side of an element. So, you can use margin-left: 4px; to give a 4-pixel margin to the left side of your element.

Just like that you can give top, right, the bottom also or you can define margin: 4px; which put a margin on the element around all four corners 4-pixels

Play with Margin

What is Padding

Padding is what you give space inside of HTML elements. So, you can use the padding property in your text, images, videos to make fit for the screen to look better.

Just like margin you can give padding to your content like text, to make space between the HTML element and content. You can give padding whole as padding: 2px; this will give 2-pixel space to all sides between your text and the HTML element.

Play with Padding

Difference Between Margin and Padding

Padding is what you give to make space between the content like text, images, and HTML elements. And margin you give between two HTML elements or between the browser’s border.

Add margin in CSS

Learn how you can add margin to your HTML element so they dont overlap to each other in the browser. let’s see the HTML code first then CSS code.

HTML Code:

<html>
	<head>
		<title> Add Margin in CSS </title>
		<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	
	<body>
		<p> Developers Nation </p>
		<p id="dn"> Aman Gupta </p>
	</body>
</html>

To run this code in your browser copy this code and past it on a note pad or any other text editor and save it in .html format. And double-click on this file or copy the path of this file path and past it on the browser search bar.

you will see something like that. Because we haven’t added any CSS code to this file. Let’s add some Code to this HTML file.

CSS Code:


p {
	background-color: pink;
	border-style: solid;
	display: inline;
}

/* Top | Right | Bottom | Left */
#dn {
	margin-top: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left: 30px;
}

In this above code, we give a 30-pixel margin to id (id=dn). And border style solid to both paragraphs and background color pink.

Copy and save this code with the .css extension and link it with the HTML document. And remember these files have to share the same folder. After adding CSS code in our HTML file let’s see the output.

Final Output:

Add padding in CSS

Let’s see some code to learn how we can add padding to our HTML elements.

HTML Code:

<html>
	<head>
		<title>Add Padding in CSS </title>
		<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	
	<body>
		<p> Developers Nation </p>
		<p id="dn"> Aman Gupta </p>
	</body>
</html>

So, this is the HTML code save this code, and let’s make CSS code to add some padding to the content of the paragraphs. So this HTML code, we use Id=dn which helps us to modify the paragraphs using CSS. Here the id is CSS property.

CSS Code:


p {
	background-color: pink;
	border-style: solid;
    display: inline;
    /* Margin for all paragraphs which apply to all four sides */
    margin: 20px;
}

/* Add padding to Top | Right | Bottom | Left */
#dn {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

So, in this CSS code, we add 5-pixel of padding to the id property called dn. So, we use # to declared id in CSS. And we also adding some margin property in the paragraph to get some spacing between two paragraphs. let’s see the output