• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ROBS WEB DESIGN

Create A Successful Website And Blog

  • About
  • Blog
  • My Toolbox
  • Contact
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

July 19, 2015 By Robin McDonald 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.
  • Bio
  • Latest Posts
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.
My Twitter profileMy Facebook profileMy Google+ profile

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

Related

Filed Under: Coding, Learning CSS, Web Design, WordPress Tagged With: Blog Design, coding, Web Design, WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published.

CommentLuv badgeShow more posts

Primary Sidebar

start-building-website-robswebdesign

Sign Up for Free Tips!

Free-WordPress-Blog-Setup

ABOUT ME

My name is Rob McDonald and I am here to help you start your own Blog or Website. Read More…

siteground-banner-larger
WPEdge-Cloud-Hosting-promo-ad-opt

MY MOST POPLAR POSTS

  • How Fast Is Your Web Host? 363 views
  • How To Increase Your Traffic And Build Relationships Using Triberr 332 views
  • How To Increase Your Website Speed With 5 Easy Steps 321 views
  • 10 Of My Favorite WordPress Plugins 238 views
  • 4 Of My Social Media Networks 223 views
  • 11 Things You Must Do Before Re-Designing Your WordPress Website 580 views

SEARCH MY SITE

Buy Me A Coffee

If you like the content of my blog, or if it has helped you in any way, please consider donating any amount.

Footer

Learning WordPress

  • Optimized-Your-WordPress-Images-With-ShortPixel-featureOptimize Your WordPress Images With ShortPixel
  • Keywords-and-Meta-Descriptions-featureHow To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages
  • Uninstall-a-plugin-featureUninstalling a WordPress Plugin And Why Its Important

Learning CSS

  • Coding-Spacing-In-CSS-featureLearning CSS Code Part 8-Coding Spacing with CSS
  • Coding-Fonts-in-CSSLearning CSS Code Part 7-Coding Fonts with CSS
  • Styling-Backgrounds-feature-Learning CSS Code Part 6-Coding Backgrounds with CSS

Twitter Feed

Tweets by @RobsWebDesign

Follow Me

  • Home
  • Blog
  • Subscribe
  • About
  • Contact

Site Designed By Rob McDonald @Robs Web Design! RobsWebDesign · Privacy Policy ·Disclosure Policy