Tutorial for HTML & CSS Box Model
The Box Model allows developers to create websites in which the area occupied by HTML elements is well defined. Each element in an HTML document can have CSS (Cascading Style Sheet) properties declared, determining width, height, padding, margins and borders. The HTML for a Web page dictates the content and structure of the page, such as text and images, while the CSS determines how the page should be presented within the user's browser. Both HTML and CSS use the Box Model to implement website layouts.
Other People Are Reading
Instructions
-
-
1
Create your HTML page. Open a new file in a text editor and save it "page.html" or any other name you like as long as you use ".html" as the extension. Insert the following outline:
<html>
<head>
<link rel="stylesheet" type="text/css" href="pagestyle.css" />
</head>
<body>
<div id="content">
<div class="style1">Here is some content</div>
<div class="style2">Here is more content</div>
</div>
</body>
</html>
The body section can include any content you need on your page, this simple example is just for demonstration.
-
2
Create your CSS document. Open a new file in a text editor and save it with the name "pagestyle.css" to match the "href" attribute in your HTML head section. Enter the following code:
#content {
background-color:#FFFF00;}
div.style1 {
width:100px;
height:100px;
background-color:#FF0000;}
div.style1 {
width:200px;
height:200px;
background-color:#0000FF;}
The background colors are included so that you can see at a glance which parts of the page are occupied by the elements. Save your file in the same directory as the HTML page and open the page in a Web browser. You should see the elements displayed with background colors.
-
-
3
Add padding to your elements. Add the padding property to the CSS declarations for each of the two classes of "div" element in your page as follows:
div.style1 {
width:100px;
height:100px;
background-color:#FF0000;
padding:10%;}
div.style1 {
width:200px;
height:200px;
background-color:#0000FF;
padding:5px 10px 15px 20px;}
The first style has the same amount of padding on each of its four sides, represented as a percentage of the element width. The second style uses a fixed measurement in pixels and has different amounts for each side, starting with the top and moving around in a clockwise direction. Save your CSS file and refresh the page in your browser to see the difference.
-
4
Add borders to your elements. Add a border property to your CSS declarations as follows:
div.style1 {
width:100px;
height:100px;
background-color:#FF0000;
padding:10%;
border:1px solid #00FF00;}
div.style1 {
width:200px;
height:200px;
background-color:#0000FF;
padding:5px 10px 15px 20px;
border:5px double #000000;}
There are many different settings for borders in HTML. Save your CSS file and refresh the page in the browser to see the border appear around each element. The border sits outside the element and its padding.
-
5
Add margins to your elements. Add margin properties to your CSS rules as follows:
div.style1 {
width:100px;
height:100px;
background-color:#FF0000;
padding:10%;
border:1px solid #00FF00;
margin:5%;}
div.style1 {
width:200px;
height:200px;
background-color:#0000FF;
padding:5px 10px 15px 20px;
border:5px double #000000;
margin:5px 10px;}
The first style uses the same width of margin on each side, but the second style uses two different widths. When two values are supplied, the first dictates margin width for the top and bottom of the element, the second for the left and right sides. Save your file and view the page in your browser. You should see the gaps displayed outside the border of each element.
-
1
Tips & Warnings
Using background colors is particularly useful while you are developing a page. If you do not want them permanently displayed you can remove them once your layouts have been created.
Don't develop in one Web browser and stop once your page looks the way you want it to. It will almost certainly appear differently in other browsers, so testing is vital.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
