Margins, Borders, and Padding

Learning Objectives:

In this section, students will:

• Learn how the box model influences how elements are placed on the page.
• Begin to understand how margins, borders, and padding play a role in element placement.

---

Margins, Borders, and Padding

CSS is more than using backgrounds and colors. Rules can also be used to position elements in relation to their parents and the document. There are sets of rules for creating margins, borders, and padding that can help to give more or less visual spacing between elements.

Box Model

CSS rules follow what is known as the box model. Elements are drawn on the screen in rectangle boxes with different rules affecting how parts of the content are shown and how its own visual spacing affects other elements around it. The box model starts with the margins, the farthest away from the content, and moves “closer” with borders, and padding before getting to the width and height of the element itself.

Margins

Similar to how the background rule was a shorthand for other rules using its name, margin is a shorthand for setting the margins (space around) elements on top, right, bottom, and left of the element. When used with a value, it will set the same margins on all sides.

Setting a small margin of, for example, 1 px (pixel) with a selector on the P tag will reduce the space around paragraph elements.

Because it serves as a shorthand for other rules, the different sides (top, right, bottom, left) can also be set as a series of values separated by a single space.

Border

The border rule acts like the margin in that it is a shorthand for other rules (top, right, bottom, left), but it also understands some additional possible values.

Unlike the margin rule, border is also a shorthand for border-style that defines how the border should appear. Possible values for border-style are dotted,  dashed, solid, double, groove, ridge, inset, outset, none, and hidden.

The second value in order is the color. As covered in the Backgrounds and Colors section, colors can be represented in many different ways.

Finally, as the last value, the border rule also understands the thickness of the border. This can be expressed in any valid CSS units like “px” for pixels.

Padding

The padding rule, like margin and border, is a shorthand for the same different sides (top, right, bottom, and left). Setting a single value will change the padding amount on all sides of the elements.

Like the other rules affected by the box model, the padding rules are affected by the width and height of an element. Changing these affects the visual layout of a HTML document and the elements it affects.

Play with the Code:

Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.

Try it Yourself:

Based on the ongoing CV example from the HTML modules, change the borders and margins.

• Using the border-bottom and margin-left rules, change the top-most (<H1> element) to have a bottom border to be solid black and 10 px. Change the indentation (add a margin-left rule) for the rest of the document to be 15px closer to the right.

Test your response on Mozilla Thimble Links to an external site.!