Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Article Blog Forum Interview Beginner News Startup Share Quiz
Users
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / what is the difference between margin and padding in css?
Ask Question

What is the difference between margin and padding in CSS?

Anonymous User 952 12 Jul 2021
Can anyone help me to know what is the difference between margin and padding and where do I have to use padding and where is margin?
css-css3 css-css3
Updated 10 Jun 2023
Anonymous User
Anonymous User

Software Developer Trainee

I am a content writter !

Message

2 Answers

Aryan Kumar
Aryan Kumar 10 Jun 2023
Report Abuse

Margin and padding are two CSS properties that are used to control the space around an element. However, they do so in different ways.

Margin is used to create space outside of an element, while padding is used to create space inside of an element.

In other words, margin pushes an element away from its surroundings, while padding pushes the element's content away from its border.

Here is a table that summarizes the key differences between margin and padding:

Feature Margin Padding
Location Outside of the element Inside of the element
Affects The element's surroundings The element's content
Values Can be negative, positive, or auto Can only be positive or auto
Inheritence Can be inherited Cannot be inherited

drive_spreadsheetExport to Sheets

Here is an example of how to use margin and padding to create a div element with a red background and a white border:

Code snippet

div {
  background-color: red;
  border: 1px solid white;
  margin: 10px;
  padding: 10px;
}

This code will create a div element with a red background, a white border, and a 10px margin and padding. The margin will push the div element 10px away from its surroundings, while the padding will push the div element's content 10px away from its border.

You can adjust the margin and padding values to suit your needs. You can also use margin and padding to create different effects, such as creating space between elements or adding a border around an element.

Ethan Karla
Ethan Karla 13 Jul 2021
Report Abuse

Margins and Padding are two important properties of CSS that help in creating a space between the elements of the latter. Margins are used to create a space outside the element.

e.g. if you create a div and you want a space from the outside of the div of 10px then you should apply margin property.

Whereas, if you want a space inside an element you should use padding.

As in the above example, you have created a div and on that div you have added some paragraph and you want 10px space between the border of the div and the paragraph then you should go through the padding.

Let us know this with the help of an example:

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <title>Margin and Padding Example | Mindstick</title>

    <style>

        body {

            margin-left: 30%;

            margin-right: 30%

        }

        .bor1 {

            border: 1px solid black;

        }

        .bor2 {

            border: 1px solid red;

        }

        .d-flex {

            display: flex;

        }

        .justify-content-center {

            justify-content: center;

        }

        .m-1 {

            margin: 10px;

        }

        .p-1 {

            padding: 10px;

        }

    </style>

</head>

<body class='bor2'> 

    <div class='d-flex justify-content-center bor1 m-1' >

        <p class='p-1'>Here is the example of Margin and padding</p>

    </div>

</body>

</html>

Here, you can understand all the logics behind Margin and padding

I think now your confusion got solved. 

Note : Margin here is shown with red color and Padding with black.

advertising