Squares and rectangles have four sides and so do the elements within your website. With CSS you can control all four sides individually.
Using CSS to Code Side Elements
Learning CSS, much like a box, all elements in CSS have sides and there are 4 of them. In this article we are going to talk about those four sides and how to code them in CSS.
I am going to be giving you some tips to help you understand all the numbers and stuff. I will help you understand how to write this and understand the basics of CSS sides of elements.
Understanding The 4 Sides to All Elements in CSS
As squares and rectangles have four sides….so do the elements in your web design.
Styling the sides of elements is most useful for when we are talking about borders and when we are talking about spacing, that’s really when we use this tag most, but can be used for really anything with the design.
With CSS, you can control the 4 sides of the element differently. So each of the four sides don’t need to be the same.
There are two ways of coding this:
Here I am just talking margins. This is just a spacing tag, just using this for an example. We have margin-top set to 15px, margin-right set to 10px, margin-bottom set to 5px and margin-left set to 15px. We have four lines of code.
Or here’s the other way of coding this. We can do it all on one line.
So you see we have the margin then 15px, 10px, 5px, 15px; all on one line. Some of the benefits to this being on one line, is that it’s easier to write it, it speeds of your site a little bit as its less code for the site to actually read. So it’s in your best interest to learn how to write all on one line like this.
In the styling, you will usually see either 1, 2, or 4 numbers listed. For example:
Here are the 3 ways we can do it. Sometimes you will see it with 1 number listed, as the margin: 10px; above, or you will see it as 2 numbers, as the margin: 10px, 5px; above, or finally, as 4 numbers as the margin: 15px, 10px, 5px, 15px; above.
What does this all mean? Which numbers control which sides? How do we understand what this is? Here are two rules that will help explain it and make this clear.
- Always start from the top
- Always go clockwise
When reading the numbers we always start at the top and right and then clockwise around the sides.
So let’s take a look again now at our example:
So, we start with the top margin of 15px, then we go right to margin of 10px, and then clockwise to bottom margin of 5px and then finally the left margin of 15px.
So those are the four sides of the element we are controlling starting with the top, right, going around clockwise, bottom and left.
But what happens where there are only 2 numbers shown instead of 4? Good question.
So here we have margin of 10px and 5px. The first number is the top and bottom margin, and the 2nd number is the right and left margin.
Our top and bottom are the same and set to 10px and the right and left are the same set to 5px.
So, as long as you have your top and bottom the same, and your right and left as the same, then you can write this with only two numbers.
What happens if there is only 1 number shown instead of 2 or 4?
Margin: 10px;
Well you can probably figure out what this means. This means that all sides are the same. So if you want to have the same margin on all four sides, then just go ahead and write one number.
You could still write all four numbers if you want, but by writing just the one you are shorting the code you have to write. And this is just a good practice to follow when designing with CSS.
Wrapping it Up
So I hope that you learned something with the four sides and it makes sense to you with the CSS sides. Just remember to always start at the top and go around clockwise, top, right, bottom, left and then your good to go with your CSS sides.
Our next article, Learning CSS Code Part 5-Coding Borders with CSS, we will be talking about coding borders with CSS.
Robin McDonald
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017
Leave a Reply