Margin and Padding Example

--- title: "What is the difference between margin and padding in CSS?" description: "What is the difference between margin and padding in CSS?" author: "Anonymous User" published: 2021-07-12 updated: 2023-06-10 canonical: https://www.mindstick.com/forum/156488/what-is-the-difference-between-margin-and-padding-in-css category: "css-css3" tags: ["css-css3"] reading_time: 4 minutes --- # What is the difference between margin and padding in CSS? Can [anyone help me](https://www.mindstick.com/forum/331/can-anyone-help-me-out-how-to-use-session-concept) to know what is the [difference between margin and padding](https://www.mindstick.com/interview/33974/what-is-the-difference-between-margin-and-padding) and where do I have to use padding and where is margin?\ ## Replies ### Reply by Aryan Kumar **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 ```plaintext 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. ### Reply by Ethan Karla 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](https://answers.mindstick.com/qa/104990/what-is-a-margin-call) 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: ``` Margin and Padding Example | Mindstick

Here is the example of Margin and padding

``` 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. --- Original Source: https://www.mindstick.com/forum/156488/what-is-the-difference-between-margin-and-padding-in-css Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.