In this tutorial, we’ll be exploring three important CSS properties to understand when laying out pages: Margins, Padding & Borders.
Margins, Padding & Borders
If you’ve read my previous post on the box model, you’ll know that the values held by the margin, padding & border properties directly effect the size of an elements’ box.
The focus of this tutorial will be how these properties relate to the box model. So make sure you read up on this first!
Now let’s explore these properties in detail.
Margin
The margin property defines the outer portion of the box model, it creates space around an element, outside of any borders. In other words, it’s invisible space around your box, that pushes other elements away from the box.
We can specify our elements’ margins on each side, like so:
Margin shorthand
We can also use margin
in shorthand form, which allows us to specify multiple margins simultaneously.
Using a single value, we apply that value to all the margins: top, right, bottom, left:
If we use 2 values, the first sets the top & bottom margins, and the second the left & right:
Using 3 values applies the first to top, the second to left & right, the third to bottom:
Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left:
The order to remember is top > right > bottom > left.
margin
accepts values in em, rem, or any of the CSS length units. As well as percentage values, and the auto
value, which we’ll take a look at now!
Auto & centering
We use auto
to tell the browser to automatically define a margin.
It’s often used for horizontal centering, like so:
With this code our element will be centered horizontally, within the available space. This will work as:
- We’ve specified the element width
- The left and right margins are set to
auto
Without a specified width, the auto
values would not work. As the available space (from the parent element) couldn’t be determined.
he more modern approach is to use flexbox for centering using justify-content: center;
. However, as margin: 0 auto
has been used so frequently over the past few years — it’s still good to know, especially when working with legacy code.
Note: auto
is useful only for horizontal (not vertical) centering!
Padding
The padding
property defines the inner portion of the box model. It creates space around the content of an element, inside of any margins and borders.
We specify our elements’ padding at each side, like so:
Padding shorthand
In the same manner as we’d use margin shorthand, we can use padding
shorthand:
Borders
The border
surrounds an element between the padding and margin. We can use it to draw an edge around an element.
We use the properties border-width
, border-style
& border-color
, to define our border.
Border width
border-width:
Specifies the border thickness.
Or you could set each edge (Top > Right > Bottom > Left ) separately, like so:
We can also use the following values:
-
thin:
Equal to1px
-
medium:
Equal to3px
-
thick:
Equal to5px
Border style
border-style:
Specifies the type of line for our border.
Values we can use are:
-
none
: The default (displays no border). -
solid
: A solid line. -
hidden
: A line is drawn, but not visible. Could be used to add some extra width, without displaying a border. -
dashed
: A dashed line. -
dotted
: A dotted line. -
double
: Two straight lines are drawn around the element. -
groove
: Displays a border with a carved appearance — that has the effect of making the element look “pressed in” to the page. -
ridge
: The opposite of groove, giving a raised effect. -
inset
: Makes the element appear embedded. -
outset
: The opposite of inset, giving an embossed effect.
Multiple border-style
values can be combined. For example:
Border color
border-color
: Specifies the color of the border.
Any valid color could be passed to this value. And if you don’t set a color, the border will default to the color of the text in the element.
You could also select the color of each edge (Top > Right > Bottom > Left) separately, like so:
Applying borders to specific sides
If we wish to apply properties to individual sides only, we could use:
border-top
border-right
border-bottom
border-left
And to style each side individually:
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
Border shorthand
Thankfully you can set these properties all at once! Using the border
shorthand. The syntax is like so:
For example:
This gives us a 5px thick, solid red border around our element.
Summary
And there you go! We’ve covered the basics of margins, padding and borders & seen how they fit into the CSS box model. With a solid understanding of these concepts, you’re well on the way to mastering CSS!
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)