The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>.

Margins create extra space around an element. In contrast, padding creates extra space within an element.

The margin property may be specified using one, two, three, or four values. Each value is a <length>, a <percentage>, or the keyword auto. Negative values draw the element closer to its neighbors than it would be by default.

When one value is specified, it applies the same margin to all four sides.

When two values are specified, the first margin applies to the top and bottom, the second to the left and right.

When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.

When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).