Scribd
Upload
7 views4 pages

Experiment 4

Uploaded by

devanshjain.xyz.1316
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
7 views4 pages

Experiment 4

Uploaded by

devanshjain.xyz.1316
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/ 4

<!

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 Demonstration</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

line-height: 1.6;

h1 {

text-align: center;

margin-bottom: 20px;

.container {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 20px;

.box {

width: 200px;

position: relative;

text-align: center;

background-color: #f9f9f9;

margin: 20px auto;


}

.content {

padding: 20px;

background-color: #cce5ff;

color: #004085;

.interactive-inputs {

margin-top: 20px;

text-align: center;

label {

margin-right: 10px;

input {

width: 50px;

margin-left: 10px;

.preview {

margin-top: 20px;

text-align: center;

</style>

</head>

<body>

<h1>CSS Box Model Demonstration</h1>

<div class="container">

<div class="box" id="box">

<div class="content" id="content">Content Area</div>


</div>

</div>

<div class="interactive-inputs">

<label>

Margin:

<input type="number" id="margin" value="20"> px

</label>

<label>

Padding:

<input type="number" id="padding" value="20"> px

</label>

<label>

Border Width:

<input type="number" id="borderWidth" value="2"> px

</label>

<label>

Border Color:

<input type="color" id="borderColor" value="#ffccd5">

</label>

</div>

<div class="preview">

<button onclick="updateBoxModel()">Update Box Model</button>

</div>

<script>

function updateBoxModel() {
const box = document.getElementById('box');

const content = document.getElementById('content');

const margin = document.getElementById('margin').value;

const padding = document.getElementById('padding').value;

const borderWidth = document.getElementById('borderWidth').value;

const borderColor = document.getElementById('borderColor').value;

box.style.margin = `${margin}px`;

content.style.padding = `${padding}px`;

box.style.border = `${borderWidth}px solid ${borderColor}`;

</script>

</body>

</html>

You might also like