CSS Box Model – DZone Web Dev

The CSS box model is a term that is thrown around in CSS with very little context, but is probably the most fundamental thing you can know in CSS. In short, the box model determines the size, margin, and fill of any object on the page. It also refers to the strange way CSS handles ‘inline’ and ‘block’ content.

The box model

In HTML, each element creates a box. Some of these elements, such as span and p is inline, which means they are aligned with the text rather than structural elements of the page.

Other elements such as div are large ‘block’ elements. Each element has a different type, so it’s helpful to become familiar with these as you learn both HTML and CSS.

Block elements have a fixed width and height that sometimes span the entire page, while inline elements are inside text lines, meaning they have content flowing next to them. Another type of block is an inline block, which is literally a block of fixed width and height within an inline context, such as within text.

Whether an element is inline or a block, all elements have a number of core ‘box’ attributes. These are shown in the diagram below:

CSS boxes

  • margin is the space outside (around) an HTML element.
  • limit is the line around the element that encloses both the upholstery and the width / height.
  • upholstery is the space around the text and the edge of the element.
  • width and height refers only to the space within it, except the upholstery.

Box Model Features

The CSS box model has 5 main features, all of which can be defined separately. Below is a div with all the features of the CSS box model applied to it:

div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 5px;
}

To padding and margin, we can also refer to each page separately on the same line. In CSS, when we refer to each page, the order is top, right, bottom, left. Take a look at the example below:

div {
    /*  top side padding: 10px
        right side padding: 20px
        bottom side padding: 5px
        left side padding: 10px
    */
    padding: 10px 20px 5px 10px;
}

These we can also directly call out by using the properties padding-top, padding-right, padding-bottom and padding-left. The exact same properties are found for margin, i.e.

div {
    margin-left: 20px;
}

Quick case study

Let’s think a little more about how boxing models work. We create a new one div, and give it a width of 40px, a padding of 20px and an edge of 2px, as shown below. We also add 4px margin.

div {
    width: 40px;
    padding: 20px;
    border: 2px solid black;
    margin: 4px;
}

How big is the box?

Since the width is 40px, the padding is 20px, and the edge is 2px, the total width displayed on the page is actually 84px!

To explain a little more, the width is as shown in the diagram width excl. upholstery. Since we said padding is 20px, CSS adds 20px to all pages of the box. That means 20px to the left and 20px to the right, which is 40px in total. When we add it to our width, we get 80px.

Finally we have 2px edge all the way around the div which is 2px on the left side and 2px on the right side. The result is 40px + 40px + 4px, or 84px.

Screen

CSS also has another feature called display, which among other things can allow you to hide an element. Display affects the box model by defining whether an object is block or inline. For the sake of the box model, let’s think of a few key features:

  • none – the item is hidden.
  • inline – the item is inline, ie. inline with text, it can not be added a width or height.
  • block – the item is a block, ie. it fills the entire width and starts on a new line.
  • inline block – the element is inline with text, but it can have a width and height added in CSS.
  • contents the item is displayed as if its container did not exist and is added to the container above.

An example of a CSS Box Model Display Property

Let’s take a look at a quick example. The code is shown below for a span set to be displayed as a block. Typically, a span is an inline element, so this line of CSS will change its behavior on the page. Note that the element is inline by default, and the width and height are does not used

span {
    display: block;
    width: 100px;
    height: 30px;
    padding: 10px;
}

Box size

The way CSS manages upholstery, width and edge separately has always been a point of contention in the CSS community. As such, a property has been created to remedy this, known as box-sizing. Box sizes let us override this standard behavior.

Let’s think about our 40px width box, which ended up being 84px wide. We can set the box size to:

  • border box: the width includes edge and padding. Our total width will now be 40px, even with padding and edge.
  • content box: standard behavior, width excludes edge and padding. Our total width will now be 84px.

Now we have a lot more control and can set our widths with the assurance that they will be displayed as we expect them to be on the page.

Borders

Boundaries are another way we can influence the cash register model. Edges can be defined as surrounding the entire element, or on a particular side, using border-top, border-right, border-bottom or border-left. Here is an example:

div {
    border: 1px solid red;
    border-top: 2px solid black;
}

A boundary property can also be divided into separate lines. 1px solid red can be written as:

div {
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

In the same way we can apply these on a single page, ie border-top-width, border-top-color or border-top-style to the top. We can do this for any site.

The color accepts any color and you can learn more about colors in the color section. that border-style the property accepts the following values: None, Hidden, Dotted, Stistret, Solid, Double, Groove, Ridge, Inset, Outset

Boundary radius

Finally, the border radius allows us to add rounded edges to our divs. Note, this does not affect the box model, so the size of the item remains the same, but it affects its aesthetics. It accepts any device – but I use pixels as an example below. The larger the unit, the larger the rounding. Here is an example in code of what it looks like:

div {
    border-radius: 20px;
}

Conclusion

That’s all you need to know to understand the cash register model. If you are interested in testing your knowledge, I have also made a quiz that you can check out here. Thanks for reading.

Leave a Comment