Embedded Files
The CSS Box Model
The CSS Box Model
When discussing design and layout in CSS, the phrase "box model" is used.
The CSS box model consists of a box that wraps around every HTML element. It is made up of the following elements: margins, borders, padding, and the actual content. The box model is seen in the image below:
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. To be precise, no one should engage in any type of employment unless he obtains some advantage from it. Do not be furious with the pain in the reprimand in the pleasure he wants to be a hair from the agony in the hope that no breeding occurs. They do not come forth until they are blinded by lust; those who abandon their responsibilities and soften their souls, that is, their labors, are at fault.</div>
</body>
</html>
CSS
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Explanation of the various parts:
Concent- The content of the box, where text and images appear
Padding - Removes space surrounding the content. The cushioning is clear.
Border- is a line that surrounds the padding and text.
Margin - Clears the region beyond the boundary. The edge is visible.
The box model allows us to specify space between items and build a border around them.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Calculate the total width:</h2>
<img src="https://hips.hearstapps.com/hmg-prod/images/door-shaded-by-bougainvillea-porquerolles-france-royalty-free-image-1653423252.jpg?crop=0.668xw:1.00xh;0.165xw,0&resize=980:*" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
CSS
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Page updated
Google Sites
Report abuse