Margin vs. Padding

Both CSS properties, MARGIN and PADDING are used to create space between the given HTML elements.
They are very similar to each other but there is also an important difference between them (otherwise there would not be two of them.)

Margin creates outerspace by moving the HTML element away from the boundaries of the surrounding HTML elements.

Padding generate space inside element's, adds external space by expanding own the internal bounders.

So the MARGIN property adjusts to the boundaries of parental HTML element, while the PADDING dont adjust to the boundaries on the parent element.

Examples margin and padding properties

<button type="button">BUTTON</button>

.margin {
margin:50px;
}

.padding {
padding:50px;
}



margin: 50 px from element boundaries

some text
some text
some text

padding: 50px generate space inside element's content

some text
some text
some text

margin and padding together: 50 px from element boundaries and 50px generate space inside element's content

some text
some text
some text




Privacy Policy