CSS Fundamentals: Box Model

Ask any one of my fellow Flatiron School cohort-mates: CSS was a huge pain for me during my four months in the program.

As I scoured Stack Overflow for the answers to questions so many before me have asked on the subject, one thing became clear: there exists a deep, almost irrational level of annoyance with CSS that I quickly identified with. One of my good friends and fellow programmers, Robert Notwicz, put it perfectly:

“CSS is arcane nonsense until you get uncomfortably deep into it and even then, it’s still arcane nonsense.”

Upon graduation, I resolved to make sure to spend time exploring CSS so that I could level up. Exploring its fundamentals, starting with the Box model, proved to be helpful in peeling back layers of otherwise indecipherable CSS script. The more I knew how the declarations I wrote would affect the elements on the screen, the more I could more efficiently experiment my way towards the desired end goal.

Block Elements & Inline Elements

Before we get into the Box Model, however, let’s cover the two types of HTML elements: block elements and inline elements.

Block elements, such as <h1> and <p> appear, in the “natural” flow of an HTML document. Their width is set by the width of its parent container and their height is determined by the content it contains.

Inline elements, such as <em> and <strong>, can be considered “mini-block elements”: they do not affect vertical spacing and their width is based on the content it contains and not their parent container. Inline elements are not for layout design but rather for styling whatever’s inside.

The CSS Box Model

The CSS box model is an internet-wide set of rules that govern how HTML elements on a screen are created and organized. As a result, it gives each element a few properties, starting from the outside in:

Margin is the space between a box and the boxes around it. Side-specific variants of margin are available

Alternatively, a shorthand for the margin property is also available and is structured like so: [Margin: Top Right Bottom Left]

Remember: inline boxes completely ignore the top and bottom margins of an element.

Border is the line between the padding and the margin. (The line that creates the form of the box itself.) It is defined with the following syntax: [Border: Size Style Color]

The border property can be specified with -top, -bottom, -left, and -right variants, as well. Keep in mind that while border is a common design element, it’s also a common debugging tool — the way I myself was introduced to it.

Padding is the space between a box’s content and border. (Sort of like a reverse margin, working inward.) Use the padding property (padding-top, padding-left, padding-right, padding-bottom) to add space to whichever side of the box you’d like.

Alternatively, a shorthand for the padding property is also available and is structured like so: [Padding: Top Right Bottom Left]

Content is whatever is inside the element — this could be text, an image, a video, etc.

Margins vs. Padding

This is a tricky subject because, in a lot of situations, the two can be used to solve the same problems. When trying to select the right property, however, keep the following things in mind:

· Padding has a background, while margins don’t

· Padding is included in the click area of an element, while margins aren’t

· Margins collapse vertically while padding doesn’t

Vertical Margin Collapse

One of those bits of “arcane nonsense” is the concept of vertical margin collapse. When two boxes with vertical margins are sitting on top of each other, only the box with the biggest margin is displayed and the other is “collapsed” underneath it.

To avoid this, there are a few things you can do:

· Place an invisible <div> element between both boxes

· Use padding to space out elements instead of margins, a fix that only works when padding isn’t used for anything else

· Stick to a top- or bottom-only margin convention

· Use CSS Flexbox

Explicit Dimensions & Content and Border Boxes

Boxes automatically change dimensions based on the content within. To explicitly define a box’s dimension, use height and width properties. However, this only defines the height and width of a box’s content. Padding and border are added on top of whatever the height and width of the content is. This is the default behavior for CSS and is defined as content-box.

To avoid issues of sizing, it’s good practice to use display: border-box for all your boxes as it’s much more intuitive to think of a box’s full height and width as the entirety of the box versus the only the content.

The CSS Box Model is the foundation of most of the web pages you see on a daily basis and is fundamental to mastering CSS. It took me a while to get the hang of it but the sooner you do, the sooner you’ll be able to create exactly what you’d like on the screen instead of floundering like me for three months!