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

On-Page SEO: How to Boost Your Site’s Traffic

On-page SEO has sort of become a buzz term when it comes to building traffic on the interwebs. No longer can you just write good stuff and throw it out there - if you want organic traffic, you have to work for it. Thankfully, when it comes to on-page SEO, you really...

Do I Have to Know CSS to Create a Blog?

Ugh, another article about CSS. I know, I know. But the experts say to write what you know and I, well, know CSS! Ever since I learned how to code with CSS, I've never looked back. When it comes to web design my mind automatically goes, "Blog Layout HTML CSS". I get...

How to Use Tailwind for FREE (Pinterest Without Paying!)

Have you been banging your head over your Pinterest marketing strategy and trying to figure out a way to organize your pinning schedule without spending money on Tailwind? Once upon a time, I did. I made up fancy Google spreadsheets that listed all of my blog posts...

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

You May Also Like…

Do I Have to Know CSS to Create a Blog?

Do I Have to Know CSS to Create a Blog?

Ugh, another article about CSS. I know, I know. But the experts say to write what you know and I, well, know CSS! Ever since I learned how to code with CSS, I've never looked back. When it comes to web design my mind automatically goes, "Blog Layout HTML CSS". I get...

Why You Should Learn CSS as a Blogger

Why You Should Learn CSS as a Blogger

Even though this article is titled Why You Should Learn CSS as a Blogger, I wrote it in my schedule as "Why You Learn CSS" and that made me laugh. So, why you learn CSS? While there are many fancy plugins out there that give you a buttload of control over the look of...

10 Online Courses to Learn HTML and CSS for Free

10 Online Courses to Learn HTML and CSS for Free

Are looking to learn HTML and CSS for free? While this site can certainly give you cool little coding tidbits to apply for your site, you may have a hankering to learn how to do this coding all on your own. I know I did once upon a time - and I had so much fun...

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