Scribd
Upload
4 views

css-box-model-example.html

This document is an HTML example illustrating the CSS Box Model. It includes a styled box with content, padding, border, and margin, along with an explanation of each component. The box is designed with specific dimensions and colors to demonstrate the box model properties.

Uploaded by

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

css-box-model-example.html

This document is an HTML example illustrating the CSS Box Model. It includes a styled box with content, padding, border, and margin, along with an explanation of each component. The box is designed with specific dimensions and colors to demonstrate the box model properties.

Uploaded by

madhusudhan.pallela
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

EXPERIMENT 5

5.D.PROGRAM

<!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>
/* Basic styling for the body */
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f4;
}

.box {
width: 300px; /* Set width of the content area */
height: 200px; /* Set height of the content area */
background-color: #3498db; /* Blue background for content */
color: white;
font-size: 20px;
text-align: center;
line-height: 200px;

/* Box Model */
padding: 20px; /* Space inside the box between content and border */
border: 5px solid #2c3e50; /* Border around the box */
margin: 30px; /* Space outside the box */

/* Displayed with box model properties */


box-sizing: border-box; /* Ensures padding and border are included in width
and height */
}

.explanation {
font-size: 18px;
line-height: 1.6;
color: #333;
}
</style>
</head>
<body>

<h1>Understanding the CSS Box Model</h1>

<div class="box">
Content
</div>

<div class="explanation">
<h2>Box Model Breakdown:</h2>
<p><strong>Content:</strong> The actual text or media inside the box. In this
case, it’s the word "Content" inside the blue area.</p>
<p><strong>Padding:</strong> The space between the content and the border. This
area is inside the box and is set to 20px in this example.</p>
<p><strong>Border:</strong> The line surrounding the padding. In this example,
the border is 5px solid and is colored dark gray (#2c3e50).</p>
<p><strong>Margin:</strong> The space outside the box. The margin separates
this box from any other element (or the edges of the screen). Here, it is set to
30px.</p>
</div>

</body>
</html>

You might also like