CSS Box Model

2. CSS Box Model#

Reference

2.1. The CSS Box Model#

In CSS, the term box model is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:
Explanation of the different parts:
1. Content - The content of the box, where text and images appear
2. Padding - Clears an area around the content. The padding is transparent
3. Border - A border that goes around the padding and content
4. Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

2.2. Width and Height of an Element#

Example: This <div> element will have a total width of 350px and a total height of 80px:

div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Calculation

Total element width = width + left padding + right padding + left border + right border

Total element height = height + top padding + bottom padding + top border + bottom border

320px (width of content area)
+ 20px (left padding + right padding)
+ 10px (left border + right border)
= 350px (total width)

50px (height of content area)
+ 20px (top padding + bottom padding)
+ 10px (top border + bottom border)
= 80px (total height)

2.3. CSS Borders#

The CSS border properties allow you to specify the style, width, and color of an element’s border.

Reference

Property	Description
`border`	Sets all the border properties in one declaration
`border-bottom`	Sets all the bottom border properties in one declaration
`border-bottom-color`	Sets the color of the bottom border
`border-bottom-style`	Sets the style of the bottom border
`border-bottom-width`	Sets the width of the bottom border
`border-color`	Sets the color of the four borders
`border-left`	Sets all the left border properties in one declaration
`border-left-color`	Sets the color of the left border
`border-left-style`	Sets the style of the left border
`border-left-width`	Sets the width of the left border
`border-radius`	Sets all the four `border-*-radius` properties for rounded corners
`border-right`	Sets all the right border properties in one declaration
`border-right-color`	Sets the color of the right border
`border-right-style`	Sets the style of the right border
`border-right-width`	Sets the width of the right border
`border-style`	Sets the style of the four borders
`border-top`	Sets all the top border properties in one declaration
`border-top-color`	Sets the color of the top border
`border-top-style`	Sets the style of the top border
`border-top-width`	Sets the width of the top border
`border-width`	Sets the width of the four borders

2.3.1. CSS Border Style#

The border-style property specifies what kind of border to display.

The following values are allowed:
1. dotted - Defines a dotted border
2. dashed - Defines a dashed border
3. solid - Defines a solid border
4. double - Defines a double border
5. groove - Defines a 3D grooved border. The effect depends on the border-color value
6. ridge - Defines a 3D ridged border. The effect depends on the border-color value
7. inset - Defines a 3D inset border. The effect depends on the border-color value
8. outset - Defines a 3D outset border. The effect depends on the border-color value
9. none - Defines no border
10. hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result

2.3.2. CSS Border Color#

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like “red”
HEX - specify a HEX value, like “#ff0000”
RGB - specify a RGB value, like “rgb(255,0,0)”
HSL - specify a HSL value, like “hsl(0, 100%, 50%)”
transparent
Specific Side Colors
- The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border)

2.3.3. CSS Border - Shorthand Property#

There are many properties to consider when dealing with borders, to shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

Example

p {
  border-bottom: 6px solid red;
}

Result

2.3.4. CSS Rounded Borders#

The border-radius property is used to add rounded borders to an element:

2.4. CSS Margins#

Reference
The CSS margin properties are used to create space around elements, outside of any defined borders.

There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Property	Description
`margin`	A shorthand property for setting all the margin properties in one declaration
`margin-bottom`	Sets the bottom margin of an element
`margin-left`	Sets the left margin of an element
`margin-right`	Sets the right margin of an element
`margin-top`	Sets the top margin of an element

2.4.1. Value setting#

All the margin properties can have the following values:
1. auto - the browser calculates the margin
2. length - specifies a margin in px, pt, cm, etc.
3. %- specifies a margin in % of the width of the containing element
4. inherit - specifies that the margin should be inherited from the parent element

2.4.2. Margin - Shorthand Property#

If the margin property has four values:

p {
margin: 25px 50px 75px 100px;
}
// top margin is 25px
// right margin is 50px
// bottom margin is 75px
// left margin is 100px

If the margin property has three values:

p {
margin: 25px 50px 75px;
}
// top margin is 25px
// right and left margins are 50px
// bottom margin is 75px

If the margin property has two values:

p {
margin: 25px 50px;
}
// top and bottom margins are 25px
// right and left margins are 50px

2.5. CSS Padding#

Padding is used to create space around an element’s content, inside of any defined borders.
It’s very similar to Margin

Reference

Property	Description
`padding`	A shorthand property for setting all the padding properties in one declaration
`padding-bottom`	Sets the bottom padding of an element
`padding-left`	Sets the left padding of an element
`padding-right`	Sets the right padding of an element
`padding-top`	Sets the top padding of an element

2.6. Length Unit#

2.6.1. Absolute Length Units#

Unit Name	Introduction	Example
`px` (Pixels)	A pixel is the smallest unit of measure on the screen. The exact size can vary depending on the device’s resolution and pixel density.	`<code>p { font-size: 16px; }</code>`
`pt` (Points)	A point is equivalent to 1/72 of an inch, commonly used in print media.	`<code>p { font-size: 12pt; }</code>`
`cm` (Centimeters)	Centimeters represent a physical measurement, often used for print stylesheets.	`<code>div { width: 10cm; }</code>`
`mm` (Millimeters)	Millimeters are another physical measurement unit, used less frequently than centimeters.	`<code>div { width: 100mm; }</code>`
`in` (Inches)	An inch is equivalent to 2.54 cm or 96 pixels on screens with a 96 DPI resolution.	`<code>div { width: 2in; }</code>`
`pc` (Picas)	A pica is equivalent to 12 points, commonly used in print media.	`<code>p { font-size: 1pc; }</code>`
`Q` (Quarter-millimeters)	A quarter-millimeter, primarily used in East Asian typography.	`<code>div { width: 40Q; }</code>`

2.6.2. Relative Length Units Table#

Unit Name	Introduction	Example
`em` (Element)	Relative to the font-size of the element. If not specified, it inherits from the parent.	`<code>p { font-size: 2em; }</code>`
`rem` (Root em)	Relative to the font-size of the root element (`<html>`). Useful for maintaining consistency across an entire page.	`<code>p { font-size: 1.5rem; }</code>`
`ex` (x-height)	Relative to the x-height of the current font (the height of the lowercase letter ‘x’).	`<code>p { font-size: 2ex; }</code>`
`ch` (Character)	Relative to the width of the ‘0’ (zero) character in the current font.	`<code>div { width: 10ch; }</code>`
`vw` (Viewport width)	Relative to 1% of the viewport’s width. Useful for responsive designs.	`<code>div { width: 50vw; }</code>`
`vh` (Viewport height)	Relative to 1% of the viewport’s height.	`<code>div { height: 50vh; }</code>`
`vmin` (Viewport minimum)	Relative to 1% of the smaller dimension (width or height) of the viewport.	`<code>div { width: 50vmin; }</code>`
`vmax` (Viewport maximum)	Relative to 1% of the larger dimension (width or height) of the viewport.	`<code>div { width: 50vmax; }</code>`
`%` (Percentage)	Relative to the parent element’s dimension. Commonly used for responsive layouts.	`<code>div { width: 75%; }</code>`

2.7. Task#

2.7.1. Objective:#

Understand and apply the CSS box model to create a webpage with multiple boxes.
Learn how to use properties like width, height, padding, border, and margin.
Explore the box-sizing property to control the size of boxes.

2.7.2. Set Up the HTML Structure#

Create a simple HTML file with the following structure

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Box Model Task</title>
    <link rel="stylesheet" href="./02-box-style.css">
</head>

<body>
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
    <div class="box box4">Box 4</div>
    <div class="box box5">Box 5</div>
</body>

</html>

2.7.3. Style the Boxes Using Box Model Properties:#

Use the box model properties to adjust the size and position of the boxes.

2.7.4. Apply the `box-sizing` Property:#

Box Sizing	Description	Width Calculation	Height Calculation	Example
`content-box`	Width and height include only the content. Padding and border are added outside the specified width and height.	Content Width + Padding + Border	Content Height + Padding + Border	`<div class="box content-box">content-box</div>`
`border-box`	Width and height include content, padding, and border. The total size is the specified width and height.	Total Width = Specified Width	Total Height = Specified Height	`<div class="box border-box">border-box</div>`

Use the box-sizing property to control the box dimensions, including padding and borders.

2.7.5. Sample Script#

body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Gap between flex items */
    padding: 20px;
    background-color: #f9f9f9;
}

.box {
    width: 150px; /* Content width */
    height: 150px; /* Content height */
    padding: 10px; /* Inside the box */
    border: 2px solid #000; /* Border width */
    margin: 5px; /* Space outside the box */
    text-align: center;
    line-height: 130px; /* Adjusted based on height and padding */
    background-color: #ddd;
}

/* Specific box styles */
.box1 {
    background-color: #ff9999;
}

.box2 {
    background-color: #99ccff;
    width: 200px; /* Different content width */
    height: 200px; /* Different content height */
}

.box3 {
    background-color: #99ff99;
    padding: 20px; /* Different padding */
}

.box4 {
    background-color: #ffcc99;
    border-width: 5px; /* Different border width */
    border-style: dashed; /* Dashed border style */
}

.box5 {
    background-color: #cc99ff;
    margin: 20px; /* Different margin */
    box-sizing: border-box; /* Border-box sizing */
}