CSS Box Model
The CSS Box Model is a fundamental concept in web design that describes how elements on a web page are structured and how their dimensions are calculated. Each element on a page is essentially a rectangular box, and the box model defines the layout of these boxes. The box model consists of the following parts:
-
Content
The actual content of the box, such as text or an image. Its size is defined by the width and height properties. -
Padding
Space between the content and the border. Padding is inside the box and increases the size of the box. -
Border
The line surrounding the padding (if any) and content. Borders can be styled, colored, and sized. -
Margin
Space outside the border, creating distance between the element and other elements. Margins are transparent and do not affect the size of the element itself.
Here’s a simple example to illustrate the CSS Box Model:
<!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 Example</title>
<style>
.box {
width: 200px; /* Width of the content area */
height: 100px; /* Height of the content area */
padding: 20px; /* Space between content and border */
border: 5px solid black; /* Border around the padding */
margin: 30px; /* Space outside the border */
background-color: lightblue; /* Background color of the content area */
}
</style>
</head>
<body>
<div class="box">This is a box model example.</div>
</body>
</html>
Breakdown of the .box element
Content
200px wide and 100px high.
Padding
Adds 20px around the content, so the total padding area is 40px wide and 40px high (20px on each side).
Border
Adds 5px around the padding, increasing the total width and height by 10px each (5px on each side).
Margin
Adds 30px of space around the border, pushing the box away from other elements or the edges of the container.
Visual Representation
+---------------------------+
| Margin (30px) |
| +-------------------+ |
| | Border (5px) | |
| | +-------------+ | |
| | | Padding (20px) | |
| | | +---------+ | |
| | | | Content | | |
| | | +---------+ | |
| | +-------------+ | |
| +-------------------+ |
+---------------------------+
Calculating Total Dimensions
-
Total Width:
content width + padding (left + right) + border (left + right) + margin (left + right)200px + 20px + 20px + 5px + 5px + 30px + 30px = 310px
-
Total Height:
content height + padding (top + bottom) + border (top + bottom) + margin (top + bottom)100px + 20px + 20px + 5px + 5px + 30px + 30px = 210px
Understanding the CSS Box Model is crucial for controlling the layout and spacing of elements on a web page.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.