When styling, it's necessary to keep in mind that everything that CSS shows is a box, regardless of whether that box resembles a circle or any other shape.
The body <body> is also a box meaning these shapes are inside of a box.
Based on the boxes's set dimensions, display value, and content, boxes behave differently and, by default, the contents will impact the their sizes. Let's discuss that for a moment.
The size of an element is measured by the size it would have entirely based on its content. That is its intrinsic size.
Intrinsic sizing
With intrinsic sizing, your browser makes choices based on the size of the content (default behavior) in the box, meaning instead of attempting to resize the content, our box will be resized along its content.
The min-content and max-content sizes of an element are taken under consideration when using intrinsic sizing.
min-content
min-content can be defined as the intrinsic minimum width of the content. For example:
When working with a box, the
min-contentsize is determined by the longest word in the string inside the box. That means, that the box's content size is going to be in the longest word in the string of text that we have.When working with a string of text, content size is determined by soft-wrapping the text as much as possible without making the text overflow, which means, making it appear as if the text is on different lines when it is actually still on the same line.
As we can see, each box is the same width as the longest word in the sentence it contains.
We've done this by setting the width to min-content.
max-content
max-content is the opposite to min-content, the content will be displayed as wide as possible and not wrap onto a new line.
Extrinsic sizing
Let's assume that an element's width and height are both fixed at 100 pixels. Everything inside the element is strictly constrained by these dimensions, which will be respected unless the content is too large for the box, or there will be an overflow (the content will be rendered outside of the box).
Box model
As we previously mentioned, everything is a box in CSS. We will now examine the areas that each box includes. Every area has a different function.
We can see, that we have :
Content box: It is where your content is.
Padding box: It is the area that the padding property creates, which is the border around the content box. (the padding is inside the box).
Border box: The
borderproperty creates the border which surrounds the padding box.Margin box: It is the area around your border and, is determined by the
marginproperty on your box.
your browser's developer tools, can help you understand how the box model works and how it affects your website. To open you developer tools you must click on:
-
Cmd + option + Con MacOS -
Ctrl + Shift + Con Windows/Linux.
Dev tools tutorial by google
Different ways to open Chrome DevTools
Manipulating the box model and display value
As we mentioned in one of our earlier posts CSS tutorial series: Precedence, your browser's default styles are applied to your HTML elements by the user agent stylesheet.
Display property
The display property has a range of values that determine how an HTML element will behave.
We will discuss three of these values which are significant for this tutorial.
| Display value |
|---|
| block |
| inline |
| inline-block |
- When the display property is set to
block, the element becomes a block level element. A block level element such as<div>or<p>will start on a new line and take the entire width of the page.
- When the display property is set to
inline,the element becomes an inline level element. theheightandwidthproperty will not affect the element which means, it will stay the same size.
As you can see here, a width and height of 300px was given to the span but it remained the same size 109.97 x 26
- When the display property is set to
inline-block,the element becomes an inline level element but a height and width can be applied to it.
Here are some examples of Block and inline level elements.
| Block level Elements | Inline level Elements |
|---|---|
header,nav, main,section, div, article ,aside,table, form, ol, ul, li
|
a, button, textarea, select input
|
The Last Important thing we are going to talk about in this post is box-sizing.
Box sizing
box-sizing instructs our box on how to determine its size. By default, the box-sizing property on every element is set to content-box.
When you specify content-box as the value for box-sizing, the width and height of your box will be applied to the content box. The padding and border values are then added to the content box.
Let's look at an example.
div {
height: 200px;
border: 5px solid black;
padding: 10px;
}
As you can see, our div has dimensions of 200x200, a 5px border, and 10px of padding. How high would our box be?
The height of our box is 200px we add to that 5px for the top border and another 5px for the bottom border, then we add 10px for each of the top and bottom padding.
height = 200 + 5 + 5 + 10 + 10
height = 230px
Tips
-
borderapplies 5px to each side of the box. -
paddingapplies 10px to each side of the box.
If border-box which is an alternative box model is the value assigned to the box-sizing property, then the values of padding and border will be part of the width. That means that the content box will shrink in order for the box to keep its specified width/ height.
The value border-box is more frequently used since it ensures that all elements are sized in this more logical manner.
To apply this to your entire page
* {
box-sizing: border-box;
}
Research these properties
border-radius-
border paddingmargin
Most of these properties are shorthand properties
Top comments (0)