CSS- Difference Between Padding and Margin


CSS


In this article, we explain the difference between padding and margin.

Padding and margin are two key style elements in CSS that allows us to give spacing to HTML elements in a web page. But how does padding and margin differ?

Below is an image which helps to illustrate the 2 CSS style elements:


Padding and Margin

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.

So padding is a CSS feature added to elements with borders surrounding them to give space from that border to the element content inside of the border.

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 (the space between an element content and the border), margin deals with the outer space (the space outside of the element) to the next outer element.

Thus, padding and margin have crucial differences that allows them to play key roles in styling a web page.

HTML Comment Box is loading comments...