The CSS Box Model – DZone Web Dev

by

CSS box template It’s a term thrown up in CSS with little context, but it’s probably the most important thing you can learn in CSS. Simply put, the box form defines the size, margin, and padding of any object on the page. It also refers to the strange way CSS handles ‘inline’ and ‘block’ content.

fund model

In HTML, each element creates a box. Some of these items are like span And p be in layout, meaning that it aligns with the text, rather than the structural elements of the page.

Other items, such as div are large “block” elements. Each element carries a different type, so learning about these is useful when learning both HTML and CSS.

Block elements have a fixed width and height that sometimes span the entire page, while embedded elements are within lines of text, meaning they have content that floats 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 a text.

Regardless of whether the element is inline or block, all items have a number of basic “box” attributes. These are shown in diagam below:

CSS boxes

  • margin The space outside (around) the HTML element.
  • the border It is the line surrounding the element, which encloses both padding and width/height.
  • filling The space around the text and the edge of the element.
  • Display And Height It only indicates the space inside that, excluding padding.

Fund Model Characteristics

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

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

to padding And margin, we can also indicate each side individually on the same line. In CSS, when we refer to each side, the order is Up, Right, Down, 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;
}

We can also call it directly using properties padding-topAnd padding-rightAnd padding-bottom And padding-left. Exactly the same properties exist for margin, such as:

div {
    margin-left: 20px;
}

Quick Case Study

Let’s think a little about how box models work. create a file div, and give it a width of 40px, an area of ​​20px, and a border of 2px, as shown below. We also add 4 pixels from the margin.

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

What is the size of the fund?

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

To explain a bit more, the width as shown in the graph is Display Except for the padding. Since we said padding It is 20px, and CSS adds 20px to All sides from the fund. This means 20 pixels on the left and 20 pixels on the right, which is 40 pixels in total. When we add that to the width, we get 80px.

Finally, we have a 2px border all the way around the div, which is 2px in the left side and 2px in the right side. the result is 40 pixels + 40 pixels + 4 pixels, or 84 pixels.

Show

CSS also has another property called width, which among other things, can allow you to hide an element. Width affects the box model, by determining whether the object is or not block or inline. For the purposes of the box model, let’s consider some key characteristics:

  • Nobody – The item is hidden.
  • in layout – The element is inline, i.e. it is included with the text, and it is not possible to add width or height to it.
  • to forbid The element is a block, that is, it takes the entire width and starts on a new line.
  • inline block The element is inline with the text, but a width and height can be added to it in CSS.
  • Contents – The item is displayed as if its container does not exist, and is added to the container above.

Example of a CSS box form display property

Let’s look at a quick example. The code below shows a space that is set to display as a block. The extension is usually an inline element, so this CSS line will change its behavior on the page. Note that by default the element is inline, width and height Not applied

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

box sizing

The way CSS manages padding, width, and border separately has always been a point of contention in the CSS community. As such, a property was created to treat this, known as box-sizing. The size of the box allows us to override this default behavior.

Let’s think of a 40px wide box which ends up being 84px wide. We can set the box size to:

  • square border: Display includes Borders and padding. Our total width will now be 40px, even with padding and border.
  • Content box: default behavior, display exclude Borders and padding. Our total width will now be 84px.

Now we have more control and can set our offers with certainty so that they display as we expect them to be on the page.

the border

Boundaries are another way we can influence the box model. A border can be defined as surrounding the entire element, or on a specific side, using border-topAnd border-rightAnd border-bottom or border-left. Here is an example:

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

The bounds property can be split into separate lines as well. 1px solid red It can be written as:

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

Similarly, we can apply these to one side, i.e. border-top-widthAnd border-top-color or border-top-style for the upper side. We can do this for any side.

Color accepts any color, and you can learn more about colors in the Colors section. the border-style The property accepts the following values: none, hidden, dotted, dashed, solid, double, groove, ridge, inner, outer

border radius

Finally, stroke radius allows us to add rounded edges to our divs. Noticeable, This does not affect the fund model, so the size of the element remains the same, but it affects its aesthetics. Accepts any unit – but I’m using pixels as an example below. The larger the unit, the larger the approximation. Here is an example in code of how it looks:

div {
    border-radius: 20px;
}

conclusion

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

.

Leave a Comment