Scribd
Upload
6 views2 pages

Box Model Css

The CSS Box Model is a key concept in web design that defines how HTML elements are rendered as rectangular boxes, comprising content, padding, border, and margin. It explains how to calculate the total width and height of an element by adding the dimensions of these components. CSS properties such as width, height, padding, border, and margin are used to control the box model's appearance and spacing on a web page.

Uploaded by

thomsanj77
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
6 views2 pages

Box Model Css

The CSS Box Model is a key concept in web design that defines how HTML elements are rendered as rectangular boxes, comprising content, padding, border, and margin. It explains how to calculate the total width and height of an element by adding the dimensions of these components. CSS properties such as width, height, padding, border, and margin are used to control the box model's appearance and spacing on a web page.

Uploaded by

thomsanj77
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
You are on page 1/ 2

The CSS Box Model is a fundamental concept in web design and layout that describes how

elements on a web page are rendered and how their dimensions are calculated. Each HTML
element is represented as a rectangular box, and the box model defines the properties that affect
the size and spacing of these boxes. The CSS Box Model consists of four main components:
Content: It represents the actual content of the element, such as text, images, or other media. The
content area is where the actual content of the element is displayed.
Padding: It is the space between the content and the element's border. Padding is used to create
space inside the box without affecting its background or border.
Border: It is a line that goes around the padding and content. The border can be styled with
different colors, widths, and styles, and it separates the element from its surrounding elements.
Margin: It is the space between the element's border and the adjacent elements. Margins are used
to create space between elements and control their positioning on the page.

The total width of an element can be calculated using the following formula:

Total width = content width + left padding + right padding + left border + right border + left
margin + right margin

Similarly, the total height of an element can be calculated as:

Total height = content height + top padding + bottom padding + top border + bottom border +
top margin + bottom margin

By default, when you set the width and height properties of an element in CSS, you are
specifying the dimensions of the content area. The padding, border, and margin are added to the
specified width and height to calculate the total space occupied by the element on the page.

Here's a visual representation of the CSS Box Model:


In CSS, you can control the box model properties using the following properties:
width and height: To set the dimensions of the content box.
padding: To set the padding around the content.
border: To set the properties of the border.
margin: To set the margin around the element.

For example:
<html>
<head>
<style>
.box {
width: 1000px;
height: 700px;
padding: 50px;
border: 2px solid black;
margin: 25px;
}
</style></head>
<body class=box>

<h1>Introduction of Box Model</h1>


</body>
</html>

You might also like