Scribd
Upload
10 views6 pages

Web Development (HTML& CSS) Module 7 - The Box Model

The document explains the box model in web development, detailing how HTML elements are represented as rectangular boxes consisting of content, padding, border, and margin. It provides code examples for defining the size of the content area, adding padding and borders, and controlling margins for spacing between elements. Understanding these components is essential for precise element sizing and layout alignment.

Uploaded by

Chidinma
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views6 pages

Web Development (HTML& CSS) Module 7 - The Box Model

The document explains the box model in web development, detailing how HTML elements are represented as rectangular boxes consisting of content, padding, border, and margin. It provides code examples for defining the size of the content area, adding padding and borders, and controlling margins for spacing between elements. Understanding these components is essential for precise element sizing and layout alignment.

Uploaded by

Chidinma
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

WEB DEVELOPMENT

(HTML & CSS)

Module 7
The Box Model
1
Introduction To The Box Model

The box model describes the rectangular boxes generated for HTML elements. Each box
includes content, padding, border, and margin, which together define the element’s space and
layout.

2
Content Area

The content area contains the text or media inside an element. Width and height properties
define its size.

Code Example:
div {
width: 300px;
height: 150px;
}

3
Padding and Borders

Padding adds space between content and border, while borders define the element’s
edge.

Code Example:
div {
padding: 20px;
border: 2px solid black;
}

4
Text Alignment And Spacing

Margins
Margins control the spacing between elements, preventing overlapping and cluttered layouts.

Code Example:
div {
margin: 15px;
}

5
Width and Height

Setting width and height, combined with padding, border, and margin, ensures precise
element sizing and alignment within layouts.

Code Example:
div {
width: 400px;
height: 200px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}

You might also like