Learning CSS: Part 4: Margins, Borders, and Padding

Learning CSS

Cascading StyleSheets (CSS) is a web technology designed for use with HTML. Using CSS allows for the separation of the presentation from the content and can help with customizing layout, colors, and accessibility settings.


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

Screenshot 2018-09-12 11.21.49

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

Screenshot 2018-09-12 11.28.01

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.

Screenshot 2018-09-12 11.29.32

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

Screenshot 2018-09-12 11.32.49

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.

Screenshot 2018-09-12 11.34.25

Border

Screenshot 2018-09-12 11.35.39

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.

Screenshot 2018-09-12 11.41.53

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

Screenshot 2018-09-12 11.43.17

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.

Screenshot 2018-09-12 11.46.11

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.

Codepen Example:

See the Pen Learning CSS: Part 4: Margins, Borders, and Padding by Dan Cox (@videlais) on CodePen.

Mozilla Thimble Example:

Remix on Mozilla Thimble!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s