CSS Box Model Tutorial | Coding Tag
×

CSS Box Model

3629

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>

Result:




Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments