The Box Model of Website Styling
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
- Content - The content of the box, where text and images appear
- Padding - Clears an area around the content. The padding is transparent
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent
For Example:
Code Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h2>This is Box model example</h2>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium cum, molestias odit recusandae quisquam quod fuga numquam neque quis nam dolore illo. Cupiditate alias praesentium tenetur molestias exercitationem reiciendis numquam laborum, repudiandae facilis delectus provident. Corporis aliquam praesentium et, quas cupiditate, reprehenderit tempora libero voluptas, qui ullam deleniti esse facere.</div>
</body>
</html>
CSS:
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
To learn more about the box model, the link is given below:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
Comments
Post a Comment