CSS and Box Model, The Lesson That I Would Like To Have Had Sooner
Any front-end developer has positively met several people with different and even inconsistent opinions on CSS. From the friend of a friend who says “I know how to do some websites and work with CSS… it’s easy!”, because he manages to get a box in the corner with a float, to the experienced developers who consider the element alignment a major headache.
After all, is CSS easy or hard? Why are so many different opinions out there?
For some time, this was me: I used some properties that are easy to recognize, I used others which I thought I had mastered — I just thought, I lacked everything else — and tons of copy paste, but when I learned the box model I finally understood the way I could use to fix most issues.
Centering an element has always been easy, in fact. It is only difficult because we don’t take CSS seriously enough to learn its core elements. The accessibility to create code in CSS is, for the most part, the major booby-trap… we are the ones who facilitates.
We are in 2018 and the question “How can I center an element?” still remains popular. So I think it’s important to have a conversation about the box-model.
What is the Box Model?
Imagine every HTML element as a rectangular box. Even if you see a circle on the screen, it is a technically a rectangular box with properties that turn it into a circle.
The basic properties of each unit are (from inside out):
- Content
- Padding
- Border
- Margin
There are more properties that change the positioning or the behavior of the element, but these are the properties that the whole element has by default, hence affecting its structure.
Content is the part that contains text, image or other elements placed inside the element (an html tag) in question. It has the size of its content — e.g., text or image length — or according to what was set in the height and padding properties.
In the image above, it has 200px by 200px.
Padding is the spacing between the content and the border. A straightforward way to visualize the shape up until now is that the sum of the content and the padding defines the area that has the color of the background stipulated by the background-color property.
In the element used as an example, there is 20px of padding on all sides, which creates a gap between the edge and the content.
Border, as the name foretells, is the limit of the box, which can also have a size, a color and style.
Above we can see an example of a 2px border with black color.
Margin is the distance to the elements around, starting from the border.
The exemplificative image has 20px of margin on all sides.
USEFUL TIP: Margin has a magical value to be centered horizontally: auto. In fact, what it does, when applied to margin-left or margin-right, is to allow the entire possible margin. Therefore, margin-left with an auto value will push the element to the right as much as possible. When applied to the left and to the right, the simultaneous effect places it at the center.
The display property
This is an important property which affects the box model. This property can assume several different values, including those that are in the forefront, like the flexbox or grid, which aim to solve layout issues of one and two dimensions, respectively.
Flexbox and Grid CSS are, obviously, techniques that one has to learn and to use, but I suggest that you start to understand three values — block, inline and inline-block -, found in most of the elements by default and that will help the debugging process. Yes, it is possible to debug in CSS if we know these fundamentals, and they save a lot of time.
Block — a property that assumes almost all properties of the box model and, by default, occupies a new line and the whole possible width.
A div tag is, by default, a block element.
Inline — the size is always set by its content (it does not accept changes in height or width properties), and it can be placed inside other content such as text. It also does not accept margin-top or margin-bottom (only for the sides) and the padding-top or padding-bottom does not affect the positioning of the elements around.
The tag span and a are an example of inline elements.
Inline-block — It’s a mishmash of the previous two, as the name implies. Like the inline, it can be placed in the middle of content such as text, but it may assume a specific size, as well as margin or padding.
The most obvious example is the img tag for an image.
USEFUL TIP: When you are having some behavioral issue, because the element is not assuming the stipulated size, or a margin or padding, you should always look for this property. Most of the times, this is where we find the solution.
Your friend box-sizing
When we explain the box model, we say that the content may have a specified height and width. This affects the content area and, visually, our box has the size equivalent to the sum of:
Content + padding(s) + border(s)
If we define height and width with 200px each, the padding with 25px for all sides, and the border with 2px will, we see a square with 254px width.
Does this mean that when we reproduce a previously designed interface, we always have to deduct the value of padding and border? CSS has good news: not necessarily!
If we do nothing, yes, the box-sizing property is set with the content-box value, which then prompts the behavior we mentioned. But, if we want it to be more intuitive, we can change the value for border-box.
And, now, the height and width set the total size of the area comprised of content, padding and border.
Much more intuitive, isn’t it?
USEFUL TIP: Quite often, developers prefer to use the box-border as default because it helps in the execution of a design. Easily, this effect is achieved by stipulating in the beginning of the CSS document the following property:
Being placed at the beginning of the CSS document is important to affect all elements and to make the CSS developer realize that is being used right away. Preferably, it should be included in the CSS documentation, if there is one, since it is an adjustment to the initial default of CSS.
Debugging in the browser
Debugging in CSS may not be as easy as a programming language, but understanding the box-model concept is a great step to be able to take advantage of the inspector that any renowned browser offers.
My preference goes to Google Chrome, but other browsers like Mozilla Firefox or Safari or the Edge offer this essential tool for those who want to do some debugging. There you have the box model, in Chrome’s case, you may notice that you have the positioning properties on the outside — top, right, bottom, left — if they were used. The process is simple: choose the desired html element in the inspector and view the box model displayed. I swear that this will spare hours of your life.
To sum it up
One may learn many CSS things before the Box Model concept, there is not anything wrong with that, but this subject should be introduced as soon as possible, almost as if it was the first theoretical concept when it comes to learning how to create a layout.
If we understand the Box Model and properties like display or position, we understand how to solve most CSS issues.
Read more about how to improve your code with SASS.
References:
