Scribd
Upload
19 views2 pages

File 4

Uploaded by

mecew10721
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
19 views2 pages

File 4

Uploaded by

mecew10721
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

Question : Create a HTML, CSS program to demonstrate BOX model of CSS

Explore setting paddings margins border width etc

Refer following link https://www.w3schools.com/ css/css.boxmodel.asp

Ans. HTML (box-model-demo.html)

<!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 Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="box">
<h2>This is a box!</h2>
<p>Observe the box model properties:</p>
</div>

</body>
</html>

CSS (styles.css)

/* Set a general margin and padding for the body */


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
}

/* Box Model Demo */


.box {
width: 300px; /* Width of the content area */
padding: 20px; /* Padding inside the box (around the content) */
margin: 30px auto; /* Margin outside the box (creates space between boxes or
elements) */
border: 10px solid #4CAF50; /* Border around the box */
background-color: #ffffff; /* Background color of the box */
box-sizing: border-box; /* Ensures the border and padding are included in the
width */
}

/* Styling for text inside the box */


h2 {
color: #4CAF50;
margin-bottom: 10px;
}

p {
color: #555;
}
/* Adding a border around the page for clarity */
body {
border: 5px dashed #333;
padding: 20px;
}

You might also like