The box model consists of four elements:
Content: This is the actual content of the HTML element, such as text, images, videos, or other media.
Padding: This is the space between the content and the edge of the element's box. It can be used to add visual separation or white space around the content.
Border: This is a line or set of lines that surrounds the padding and content of the box. It can be used to add visual interest or to separate the element from other elements on the page.
Margin: This is the space outside of the element's border. It can be used to create space between the element and other elements on the page, or to push the element away from the edges of the browser window.
When an element is displayed on a webpage, its total width and height are determined by adding together the content width and height, the padding width and height, the border width and height, and the margin width and height.
CSS provides several properties that can be used to modify each of these box model elements, including:
width and height to set the size of the content box.
padding to set the amount of space between the content and the border.
border to set the style, width, and color of the element's border.
margin to set the amount of space between the element's border and the next element on the page.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 2px solid black;
margin: 50px;
}
.content {
background-color: lightblue;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h1>Hello, World!</h1>
<p>This is an example of the CSS Box Model.</p>
</div>
</div>
</body>
</html>
This program creates a rectangular box with a width and height of 200 pixels, with 20 pixels of padding around its content, a 2-pixel black border, and a 50-pixel margin around the entire box. Inside the box, there is a child element with a light blue background color and a height of 100% (which fills the entire height of the parent box). The child element contains a heading and a paragraph of text.
By adjusting the values of the CSS properties in this program, you can experiment with how the box model affects the layout and appearance of the webpage.
This program creates a rectangular box with a width and height of 200 pixels, with 20 pixels of padding around its content, a 2-pixel black border, and a 50-pixel margin around the entire box. Inside the box, there is a child element with a light blue background color and a height of 100% (which fills the entire height of the parent box). The child element contains a heading and a paragraph of text.
By adjusting the values of the CSS properties in this program, you can experiment with how the box model affects the layout and appearance of the webpage.
Tags:
CSS