AVeryNiceWeb

How To Create a Content Box

Cascade Style Sheets

How To Create a Content Box

Postby admin » Tue Feb 13, 2018 9:56 am

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:
    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

The box model allows us to add a border around elements, and to define space between elements.

Screenshot-2018-2-13 CSS Box Model.png
Screenshot-2018-2-13 CSS Box Model.png (8.84 KiB) Viewed 85 times

Example code:
Code: Select all
div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}


Code: Select all
<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<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 actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>
The AVNW Support Team
http://www.AVeryNiceWeb.com

If there is a false accusation made against you, then remove this fake report.

Shopping for a new website? See our design deals.

How much is your website worth? Get a free estimate.

And, if our post has provided you with great information, there are a few ways you can show your appreciation:
  1. Like us on Facebook
  2. Post a review.- Posting a good review about this site could help us provide improved support.

Thank You!
User avatar
admin
Site Admin
 
Posts: 496
Joined: Sun Jan 12, 2014 11:18 pm
Location: New York City

Return to CSS

Who is online

Users browsing this forum: No registered users and 0 guests

cron