How do margins and padding work?

  1. Margins and padding

Block-level HTML tags, such as paragraphs, blockquotes, and lists, are boxes with margins and padding. If you were to draw a box around a tag’s contents, the margins are outside of the box and the padding is inside of the box. When you add borders to an HTML tag, the borders go between the padding and the margin.

The padding goes inside the box, and the margins go outside the box.

So, when we added a border on the left of the body of our web page, the border is indented by 10% because that’s the margin we gave the body. When we add padding to the body, that pushes the text further in without moving the border.

You can more clearly see the margins vs. the padding by adding a background color to the tag that contains the body tag, and specifically setting the body’s background to white:

body {

width: 80%;

margin-left: 10%;

text-align: justify;

border-left-style: dashed;

border-left-color: orange;

border-left-width: .2em;

padding-left: 1em;

background-color: white;


html {

background-color: tan;


image 6

Once you see the tan margins around the body of your document, go ahead and remove the “html” section of your CSS file.

  1. Margins and padding