The CSS Box Model is a fundamental concept for understanding how HTML elements are sized and organized on a web page. It describes four main components: content, padding, border, and margin. In this tutorial, we’ll explore these concepts in detail with code examples to help you master the CSS Box Model.
Content
The content component represents the actual content of an HTML element, such as text, images, videos, or other embedded elements. It is the visible part of the element inside its border.
Example:
|
1 2 3 4 5 6 7 8 |
/* Styling a content box */ .content-box { width: 200px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Content Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="content-box">Content</div> </body> </html> |
Padding
Padding is the area between the content and the border of an element. It creates internal space within the element to separate it from adjacent content or other parts of the layout.
Example:
|
1 2 3 4 5 6 7 8 9 |
/* Styling a box with padding */ .padding-box { width: 200px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; padding: 20px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Padding Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="padding-box">Padding</div> </body> </html> |
Border
The border is the outer edge of an element that surrounds both the content and padding. It defines the visible boundary of the element.
Example:
|
1 2 3 4 5 6 7 8 9 10 |
/* Styling a box with a border */ .border-box { width: 200px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; padding: 20px; border: 2px solid navy; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Border Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="border-box">Border</div> </body> </html> |
Margin
Margin is the space outside the border of an element. It creates separation between the element and other elements in the layout.
Example:
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Styling a box with margin */ .margin-box { width: 200px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; padding: 20px; border: 2px solid navy; margin: 30px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Margin Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="margin-box">Margin</div> </body> </html> |
The Box Model in Action
To see the CSS Box Model in action, open the HTML examples provided in your web browser. Experiment with different values for width, height, padding, border, and margin to get a hands-on understanding of how these properties affect the layout and spacing of elements on a web page.
Understanding the CSS Box Model is crucial for precise control over the layout and spacing of your web page elements. By mastering these concepts, you’ll be well-equipped to create visually appealing and well-organized web designs.