Difference between margin and padding?

Question

What exactly is the difference between margin and padding in CSS? It really doesn\'t seem to serve much purpose. Could you give me an examp

Answer 1

Margin and padding are both types of padding really....One (margin) goes outside of the elements border to distance it from other elements and the other (padding) goes outside of the elements content to distance the content from the elements border.

Answer 2

Margin is a property in CSS that is used to create spaces around the elements, outside of the border. The programmer can set the margin for top, right, bottom and left. In other words, he can set those values using margin-top, margin-right, margin-bottom and margin-left.

The Margin values can be of the following types.

First, auto allows the browser to calculate the margin. Moreover, length denotes a margin in px, pt or cm, while % helps to describe a margin as a percentage relative to the width of the containing element. Finally, inherit denotes that the margin has to inherit from the parent element.

Padding is a property in CSS that helps to create space around an element inside the border. The programmer can set the padding for top, right, bottom and left. In other words, he can set those values using padding-top, padding-right, padding-bottom and padding-left.

The Padding values can be of the following types.

The length describes padding in px, pt or cm, while % denotes padding as a percentage relative to the width of the containing element. Finally, inherit describes that the padding should be inherited from the parent element.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Difference Between Margin and Padding

Margin is a CSS property that is used to create space around the element outside the defined border, while the padding is a CSS property that is used to create space around the element, inside the defined border. Thus, this explains the main difference between margin and padding.

Values Furthermore, the values of margin can be auto, length, % or inherit, whereas the values of padding can be length, % or inherit type. Hence, this is another difference between margin and padding.

In brief, margin and padding are two properties in CSS that allows styling the web pages. It is not possible to assign negative values for those properties. The main difference between margin and padding is that margin helps to create space around the element outside the border, while padding helps to create space around the element inside the border.

Answer 3

Padding

Padding is a CSS property that defines the space between an element content and its border (if it has a border). If an element has a border around it, padding will give space from that border to the element content which appears in that border. If an element does not have a border around it, then adding padding has no effect at all on that element, because there is no border to give space from.

Margin

Margin is a CSS property that defines the space of outside of an element to its next outside element.

Margin affects elements that both have or do not have borders. If an element has a border, margin defines the space from this border to the next outer element. If an element does not have a border, then margin defines the space from the element content to the next outer element.

Difference Between Padding and Margin

So the difference between margin and padding is that while padding deals with the inner space, margin deals with the outer space to the next outer element.

Answer 4

My understanding of margin and padding comes from google's developer tool in the image attached

In Simple words, a margin is the space around an element and padding means the space between an element and the content inside that element. Both these two are used to create gaps but in different ways.

Using Margin to create gap:

In creating gap margin pushes the adjacent elements away

Using Padding to create gap:

Using padding to create gap either grows the element's size or shrinks the content inside

Why is it important to know the difference?

It is important to know the difference so you could know when to use either of them and use them appropriately.

It is also worthy of note that margins and padding come handy when designing a website's layout, as margin specifies whether an element will move up or down, left or right while padding specifies how an element will look and sit inside its container.