Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Box Model

10 minutes

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

CSS Box Model

The CSS Box Model

When discussing design and layout in CSS, the term “box model” is employed.

The CSS box model encompasses a box surrounding each HTML element, comprising content, padding, borders, and margins. The following image illustrates the box model:

Here’s an explanation of the different components:

Content: This section encompasses the actual content of the box, where text and images are displayed.
Padding: Padding clears an area around the content, providing space between the content and the border. The padding area is transparent.
Border: The border encircles the padding and content, delineating the boundaries of the box.
Margin: Margin clears an area outside the border, establishing space between the element and its surrounding elements. The margin area is transparent.

Utilizing the box model, we can incorporate borders around elements and establish spacing between them.

Example

Illustration of the box model:

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

Width and Height of an Element

Understanding how the box model operates is essential for accurately setting the width and height of an element across various browsers.

Crucially, when you specify the width and height properties of an element using CSS, you’re only defining the dimensions of the content area. To accurately determine the total width and height of an element, you must also account for the padding and borders.

Example

The total width of this <div> element will be 350 pixels, and its total height will be 80 pixels.

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

Below is the calculation:

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)

To calculate the total width of an element, use the following formula:

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

Similarly, to determine the total height of an element, apply the following formula:

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

Please note that while the margin property influences the overall space occupied by the box on the page, it is not factored into the actual dimensions of the box. The total width and height of the box are limited to the border.