Understanding the CSS Box Model
Understanding the CSS Box Model

CSS is such a wonderful and mind-boggling language that gives you complete control over the look and feel of your blog.

Yet, most bloggers and site owners scream and run in the opposite direction when they catch sight of this language. Some even throw money at others to deal with simple CSS issues.

CSS is super easy to navigate once you understand how it works. While I’m not promising that you’ll be able to code your own site by learning the basics, you’ll certainly be able to customize and tweak your site to make it personal and recognizable.

What is CSS?

CSS stands for Cascading Style Sheet and is used to format HTML documents. You can use CSS to control your layout, fonts, colors, etc.

Don’t confuse CSS with the content of your site – HTML takes care of all of that. For example, you cannot use CSS to display your blog post. CSS is used to make that blog post look pretty.

Everything visual on your site can be manipulated with CSS. You can also use CSS to implement your own layout designs.

Doing this requires an understanding of the CSS box model which, lucky for you, I’m going to explain in this article.

The CSS Box Model

The CSS box model works on the premise that HTML elements exist in boxes. These boxes wrap around the HTML and consist of margins, padding, borders and content.

  • Content: This includes any text and images.
  • Padding: The space around the content inside the box.
  • Margin: The space outside of the entire box.
  • Border: Refers to the frame around the padding and content.

The box model allows you to add borders around elements, or “boxes”, and define the space between them.

Margins and Padding

Margins and padding are used to create gaps around elements to space them out.

Margins are used to create space outside of an element, such as a

box. Using margins does not change the container size.

Padding, however, will change the container’s size since it adds space inside the element around its content.

When to Use Margins and Padding

Margins are used when you want to create space around an element or between elements.

You can also position and center elements using margins:

Padding, as I’ve mentioned, is used to create space inside the element. So if you don’t want the content inside the container to touch the edges, you would use padding.

How to Use Margins and Padding

In the CSS coding, margins and padding look like this:

margin: X X X X;

padding: X X X X;

The X’s represent a number in pixels.

The order goes: top, right, bottom, left. This allows you to control each space in each direction using only one line of code.

If you wish to only manipulate one direction – say, the top – you can use a more specific code:

margin-top: 25px;

padding-top: 25px;

See the Pen
ZEGbmbW
by Chelsy (@mamaneedscoffee)
on CodePen.

 

The brown box is using a top margin of 25 px to create space between itself and the white box.

When it comes to defining the margins in pixels, the numbers can be negative as well. This is useful if you want to move an element further up – instead of figuring out how much space to add to the bottom, you can simply use a negative number at the top.

Left and right margins can be set to “auto” to center a

.

See the Pen
rNVOQMj
by Chelsy (@mamaneedscoffee)
on CodePen.

I used the values “0 auto” in the margin selector to center the brown box. This tells the browser: “Hey, I don’t want you to make space above or below the element but I want you to put equal amounts of space on both sides.”

If you want to add space above and below, simply enter the number of pixels instead of zero.

By the way, this piece of code demonstrates a little trick you can use if you want the same space on the top and bottom and the same space on both sides. When you use two numbers, it reads as:

margin: Top/Bottom Left/Right;

Alternatively, if you want equal spacing around the entire element, you would enter only one number!

An Example Layout

Let’s put it all together! I’m going to show you a simple little header you may see on any blog in which there is a title, a description/tagline and a navigation bar below it.

When you set up element that stack vertically on top of each other, such as div’s, you’ll notice that the coding automatically allows for some spacing between the boxes.

This is where using negative integers comes in handy.

See the Pen
yLNYQbJ
by Chelsy (@mamaneedscoffee)
on CodePen.

If you look under the CSS code for the selector “#blog-tagline”, you’ll notice I used a negative integer to move that box up closer to the title. If you were to delete it, the box would move down and there would be white space between the tagline element and the title element.

Same goes for the selector “.navbar”.

As far as padding goes, you can see how there is some space around the text that lets the background color show through.

Borders

Borders are a lovely way to add a bit of design to your boxes/elements. CSS allows you to choose your border style, width, color and whether or not you want all borders styled or just specific ones.

Why would you only want to style one side of your element? Well, take headers for example. You may want a certain to stand out by placing a vertical line to the left of it. Instead of fannagling with adding the line there, you can simple style the left-hand border.

How to Style Borders Using CSS

The CSS code for borders looks like this:

border: style size color;

The style of the border is specified by the following values:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

You can see an example of what these styles look like here.

The size will determine how thick the border will be and the color defines the, well, color.

See the Pen
WNvrwNz
by Chelsy (@mamaneedscoffee)
on CodePen.

How to Style Specific Borders

Like I mentioned above, you may want to to add a styled border to only one side of your element. You would do this in much the same way you would margins and padding:

border-top: style size color;

border-bottom: style size color;

border-left: style size color;

border-right: style size color;

You just simply need to plug in the values for the style, size and color and the code will change whichever side you define.

There You Have It!

The CSS box model can be tricky and often takes some trial and error to fully figure it out.

However, it is a useful tool for making layout-related changes in your blog’s design!

Any questions about this guide? Did I miss something? Let me know in the comments below!

Coding, design, and writing are my happy places. I can lose all track of time when I’m working on my blogs.

I hope here at MNC you will find the answers to your questions and some inspiration to make your blog or site really totally cool!

Learn More.

Latest Posts

How to Create Your Blog in HTML: The Ins and Outs

When I see questions about code, most of them pertain to CSS. While CSS is important in making your site look and feel the way you want it to, HTML is crucial in building a website. I started learning about HTML when I was in high school and began building little...

How to Become a Virtual Assistant From Home

Wouldn't it be nice to make money and stay at home? A pipe dream, you say? Not anymore! For almost two years now I have been working from home as a freelance writer making more than I did when I worked full-time. But freelance writing isn't the only way you can enjoy...

How to Start a Mom Blog in 2022

Welcome to 2022! Are you ready to start a mom blog? Nowadays, having a blog can be a lucrative business that you can run from your very own home! How much do mom bloggers make? It all depends on how much work they put into their blog and how they monetize their...

Don’t forget to sign up for the FREE Blogger Toolkit!

You May Also Like…

How to Create Your Blog in HTML: The Ins and Outs

How to Create Your Blog in HTML: The Ins and Outs

When I see questions about code, most of them pertain to CSS. While CSS is important in making your site look and feel the way you want it to, HTML is crucial in building a website. I started learning about HTML when I was in high school and began building little...

How to Customize Your Blog’s Headers to Personalize Your Brand

How to Customize Your Blog’s Headers to Personalize Your Brand

While downloading and installing a free theme is a quick and simple way to add style and structure to your site, oftentimes certain design elements are booooring. One of the first things I tackle CSS-wise when I choose a new theme is the headers. These are the titles...

How to Start a Mom Blog in 2022

How to Start a Mom Blog in 2022

Welcome to 2022! Are you ready to start a mom blog? Nowadays, having a blog can be a lucrative business that you can run from your very own home! How much do mom bloggers make? It all depends on how much work they put into their blog and how they monetize their...

0 Comments

Trackbacks/Pingbacks

  1. Simple WordPress Gutenberg Tutorial for 2021 - The Passive Sales System - […] I wanted to show you this nifty trick you can do with the “Media & Text” block, which easily…

Submit a Comment

Your email address will not be published. Required fields are marked *

Skip to content