Margins, padding, and borders oh my! Plus centering a website with CSS (MFW#6)

“My First Website” series navigation: first postwhole series

mpbIn this post of the “My First Website” series, we’re not going to touch the HTML of our website at all! Instead, we will focus only on the CSS. Specifically, how to add margins, padding, and borders. In addition, we are going to take our web page (which was stuck hard and fast to the left side of the browser window) and center it using some simple CSS.

If you haven’t done so already, fire up Notepad (Windows) or TextEdit (Mac), open the document called “style.css”, and get your “index.html” loaded up in your browser to view your results as you go through this tutorial…

Adding a border using CSS

The first thing we’re going to do to our “style.css” file is to add a border to #pagewrap. Here is what you should have written already for the #pagewrap id:

#pagewrap {
    width: 800px;
}

Next, we’re going to add four more lines of code to create a border around our page. Take a look at what your #pagewrap should look like with the new code:

#pagewrap {
    width: 800px;

    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
}

The “border-???” determines where the border will appear: top, right, bottom, or left. The “1px” means that the border will be 1 pixel in width. The “solid” means that the border will be a solid line (there are a few more styles of borders that I’ll get to in a minute.) And the #000000 is the hex color code for pure black.

Save your “style.css” file, fire up your browser, and view the file called “index.html” in your browser to see the result. It should look like this:

View the result

Different kinds of CSS borders

There are actually nine different kinds of borders you can create using CSS, but four of the five require a different kind of code than what is listed above (and, in my opinion, look horrible) and one we we’ll get into in a later post. So, for now, here is a list of the most-often used borders that can be created with the above code:

  • solid
  • dotted
  • dashed
  • double

Here’s what they look like:

A solid border.


A dotted border.


A dashed border.


A double border.

(NOTE: The double border requires a minimum of 3px to display — 1px for one line, 1px for the other line, and 1px of white space between the two.)

Adding margins and centering our website with CSS

Let’s get our web page centered in the browser window. It’s quite easy, actually. Just add these two lines of CSS code after the border code:

    margin-left: auto;
    margin-right: auto;

As before, save your “style.css” and reload the “index.html” file in your browser to see the results. It should look like this:

View the result

The “auto” means “automatic”, so the browser will automatically adjust the left-right margins of our web page. If you resize your browser window, the position of the web page will adjust accordingly.

Next, let’s put a little distance between the top and bottom of our web page and the browser window. Depending on your browser, there might already be a little space. This is because all browsers have quite a few default CSS settings. But when you create your own CSS, it will override the default settings. Add these two lines of code:

    margin-top: 30px;
    margin-bottom: 30px;

And here’s the result:

View the result

Adding padding

Finally we’re going to add some padding. The concept of padding is a little strange when you first begin using it. All it does is add some space between your content and the border. The strange part comes from how it changes the size of our #pagewrap.

We declared that our #pagewrap is to be 800px (pixels) wide. Adding the margins didn’t change its width — it’s still 800px wide. But when we add padding, the actual size of the page WILL change. The content will still be 800px wide, but the padding will add more pixels around the content.

Add this code to your CSS:

    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;

Here’s the result:

View the result

Adding it all up

Time to do the math. As I said above, margins don’t change the size of the page itself. But then we added 50px of padding all around. That means we now have an extra 50px of width on the left and an extra 50px of width on the right making our web page 900px wide.

But wait! Did you for get that we added a 1px border around the whole thing? Now we have to add 1px of width from the left side and one 1px of width from the right side.

The grand total is 902px wide!

Keep this in mind when you set the width of something using CSS. Margins don’t change the width, but adding a border or padding WILL!

A GREAT way to view the CSS box model!

Here’s a website that has a wonderful interactive representation of the CSS box model to help you understand all about margins, borders, padding, and more. Make sure to move the “perspective” slider at the bottom to see the full effect!

>> The CSS box model <<

The full CSS code

This is what your “style.css” file should look like now:

#pagewrap {
    width: 800px;

    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;

    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;

    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
}

That’s a lot for just one pagewrap!

But, there actually is an easier way to write this so that it only takes up 4 lines instead of 13! (I’ll show you how in the next post in this series.) Besides, if I show you the short hand method first, then you might not know about the CSS code above (it is used quite often.)

Your homework

We covered a lot of material in this post (and thank goodness our web page is actually starting to look like a real page!) Go ahead an play with some of the numbers. Make your borders thicker, remove one or more of them, or change their style. Add more padding or take away some. Play with the width of #pagewrap to see what happens.

In the next post, I’ll talk about the shorthand way to write all of the above CSS code as well as discuss some of the spacing issues you may have already caught (i.e. did you notice that there appears to be more padding on the top than on the sides? In the next post, you’ll discover the reason!)

Until next time!

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



7 Responses:

  1. Cheryl

    Thank you, Thank you, Thank you
    I have been messing around for days trying to get to grips with css, and thanks to you it is finally making some sense
    all the best keep blogging please

  2. Cheryl

    Thank youI have been messing around for days trying to get to grips with css, and thanks to you it is finally making some sense
    all the best keep blogging please

  3. Ang

    Thank you!! This was very useful! I was having a hard time picturing the padding and margins idea, this helped a lot. Thanks again!

  4. kumaran

    thank u very much,it is very easy to understand. i learned about border,margin and padding. thanks a lot. keep doing your work on other topics also..

  5. Kim

    Thank you,
    It seems when we learn the basics of any subject well,
    the main basics are so simple…
    We assume everyone knows or should know.”Not”
    Remember when…

    Thanks for your “simple,short and easy to understand”
    20 min.
    Normally the same info days of email lessons and many download pages too many hours spent.
    I needed to review a simple code I leaned so much more.

    Great Job
    A Super refresher course for ones, me not in this field daily.

    Thank You
    Kimberly
    Indiana, USA

  6. Oul

    Well i will start same way like others. thanks for great tutorial for making website look much better. But is it possible to fill or add background to that box that contains text. If possible can you email answer for me.
    PS:This site is great!
    voutilainen@luukku.com

  7. meckenzie

    I LOVE LOVE LOVE YOU HELPFUL WAYS KEEP BLOGGING!!!!
    ~MECKENZIE BOBLETT
    LAWRENCEBURG KY,
    40342


Share your thoughts below: