CSS Box Model

0 3947

In CSS, the term "box model" is used when talking about the design and layout of the website or webpage.

1. According to box model, the total width of an element can be calculated using the following formula: margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

2. In comparison, according to box model, the total height of an element can be calculated using the following formula: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Code of CSS Box Model:

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Box Model </title>
<style type="text/css">
.boxmodel{
margin: 20px;
border: 10px solid #ddd;
padding: 20px;
width: 400px;
height: 160px;
}
</style>
</head>

<body>
<div class="boxmodel" align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. Fusce sit amet quam metus.
Vestibulum tempor neque neque, eget tincidunt ex auctor eu. Proin tincidunt id lacus non consequat.
Vivamus ante massa, faucibus ut lacus nec, pulvinar viverra sem. Curabitur sodales interdum magna.
Donec viverra cursus massa, quis mollis nulla lacinia ac. Fusce sollicitudin dui mi, rutrum bibendum nibh tempus quis bibendum.
</div>

</body>
</html>