ROBS WEB DESIGN

Create A Successful Website And Blog

You are here: Home / Coding / Learning CSS Code Part 4-Understanding The Four Side Elements

Learning CSS Code Part 4-Understanding The Four Side Elements

By Leave a Comment

Squares and rectangles have four sides and so do the elements within your website. With CSS you can control all four sides individually.

Learning-to-Style-The-Side-Elements-In-css

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.

example-of-four-sides-of-elements

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:

first-way-of-coding-sides-with-css

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.

coding-four-sides-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:

3-rows-listed-for-the-css-margins

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.

  1. Always start from the top
  2. 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:

example-of-top-right-bottom-left-sides

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.

margin-with-2-numbers-on-line

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.

The following two tabs change content below.
My Twitter profileMy Facebook profileMy Google+ profile

Robin McDonald

WordPress Web Developer at Robs Web Design
My name is Rob McDonald and I am here to help you start your own Blog or Website. I want to teach you how to design and develop your site so that it is truly unique and awesome, just like you. Then I want to show you how to use SEO, Social Media Marketing and Branding, to make your site successful.

Reader Interactions

Leave a Reply

Your email address will not be published.

CommentLuv badge