Table of Contents
CSS Box Model
The box model is described about design and layout.
Every design and layout are created using following property:
- Content/Data – The content of the box, where text and images are available.
- Padding – The padding area is around the content. The padding is transparent.
- Border – A border is found after the padding.
- Margin – A margin is found after the border. The margin is transparent.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgreen;
width: 400px;
border: 20px solid grey;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>Use of Box Model</h2>
<p>It consists of: borders, padding, margins, and the actual content.</p>
<div>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
</div>
</body>
</html>