educative.io

Margin and padding in body element

How does giving margin as 0 in body element removes the internal space in the page while padding 0 does not not have any effect. If the space is internal to the body element it should be considered as padding. And by giving padding as 0 should remove the space.


Course: https://www.educative.io/courses/the-complete-advanced-guide-to-css
Lesson: https://www.educative.io/courses/the-complete-advanced-guide-to-css/xlyAlomORPz

Hi @Rajat_Bothra !!
The margin and padding properties in CSS have different effects on elements and their layout.

When you set the margin of the body element to 0, it removes the default margin applied by the browser. The margin controls the space outside an element, affecting the space between adjacent elements. By setting the margin of the body to 0, you are effectively removing any external spacing around the body element itself.

On the other hand, setting the padding of the body element to 0 will not affect the internal spacing of the page. The padding property controls the space between the content and the element’s border. In the case of the body element, this would only affect the content area within the body and not the space between the body and the viewport.

To remove any internal spacing within the body element, you can set both the margin and padding properties to 0. This ensures that both the external and internal spacing is eliminated.

In summary, margin controls the space outside an element, while padding controls the space inside an element. Setting margin to 0 removes the external spacing, whereas setting padding to 0 affects the space between content and the element’s border, not the internal spacing of the page.
I hope it helps. Happy Learning :blush: