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:
- 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-top
And padding-right
And 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-top
And border-right
And 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-width
And 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.
.