Chapter 4: CSS Box Model
So far, we’ve covered the basics of HTML and CSS. In this chapter, we’ll start to do some actual CSS coding. Specifically, we’ll learn about the CSS box model and look at how we can modify the look and feel of a box in CSS.
What is the CSS Box Model
All elements in CSS are treated as boxes. CSS boxes consist of margins, borders, padding, and the actual content as shown below.
The thick black line is the border. Within the border is the padding and the actual content. Outside the border is the margin of the box. The thickness of the padding, border and margin can all be modified with CSS. To understand how this box model works, let’s analyze the code below. You can download this code at http://learncodingfast.com/css.
<!doctype html>
<html>
<head><title>Chapter 4 - CSS Box Model</title>
<style type="text/css">
#box1 {
margin: 20px;
padding: 10px;
border: 5px solid black;
width: 100px;
height: 100px;
text-align: justify;
float: left;
}
#box2 {
margin: 20px;
padding: 50px;
border: 5px solid black;
width: 100px;
height: 100px;
text-align: justify;
float: left;
}
</style></head>
<body>
<div id="box1">Learn CSS in One Day and Learn It Well. CSS is easy.</div>
<div id="box2">Learn CSS in One Day and Learn It Well. CSS is easy.</div>
<p>skajd fhadlc vkas j cnl ka jshvn aclaks jdclkasjd ckasj cnkas djvcn ksa mc nlkasd jn skajd fhadlc vkas j cnl ka jshvn aclaks jdclkasjd ckasj cnkas djvcn ksa mc nlkasd jn skajd fhadlc vkas j cnl ka jshvn aclaks jdclkasjd ckasj cnkas djvcn ksa mc nlkasd jn</p>
</body>
</html>
If you run this code, you’ll get the boxes below. The gibberish text beside and below the boxes is added to show the margin.
This code defines two boxes with width and height of 100 pixels. This width and height refers to the dimensions of the content area only.
The first box (box1) has a padding of 10 pixels (px) around the content area. Around the padding, it has a solid black border of 5px. The total width of box1 (including its border) is 100 (content area) +10*2 (padding on both sides) +5*2 (border on both sides) = 130 px. The same applies for the height.
The second box (box2) has a padding of 50px. Despite box2 being much larger than box1, notice that the text “Learn CSS in One Day and Learn It Well. CSS is easy.” still occupies the same area? This is because the content area is determined by the width and height properties, not by the padding. box2 has a total width of 100+50*2+5*2 = 210px. Its height is also 210px.
Outside the border, we have a margin of 20px for both boxes. Notice there some space between the gibberish text and the boxes? That is the margin.
Try playing around with the code a bit and changing the values of the width, height, padding, margin and border properties. Observe what is affected by each change. You should notice that width and height affects the content area. Margin affects the area outside the border while padding affects the area inside. Border is of course the border of the box. We’ll cover each of these properties in detail next.
Width and Height Properties
The width and height properties of a CSS box specify the dimensions of the content area (excluding the padding, border and margin). The values are normally given in pixels or as a percentage. For instance, the code in our example sets the width and height of both box1 and box2 to 100px. You can also set the width to 80%. The boxes’ content area will then occupy 80% of the width of the page. Finally, you can set the height and width to auto. In this case, the browser will calculate these values automatically, based on the amount of space needed to display the content inside the box.
Overflow Property
Sometimes, the width and height of the content area may be too small to accommodate the contents inside the box. By default the content will flow out of the box and overlap other contents. This results in a very badly formatted web page. If you do not want this to happen, you can use the overflow property. The diagram below shows how content is displayed using different values for the overflow property (visible, hidden, scroll and auto).
Padding and Margin Properties
Paddings and margins are both transparent. Hence we cannot change their color. However, we can specify their width. The most commonly used unit for specifying width is the pixel. If you want the margin to be 10 pixels, you write margin: 10px;. There should not be any space between 10 and px.
The examples below show four different syntaxes for specifying margin width. The same works for paddings. Just change the property name from margin to padding.
Syntax 1
margin: 25px;
This syntax sets all four margins to 25px.
Syntax 2
margin: 25px 50px;
This syntax sets the top and bottom margins to 25px; the left and right margins to 50px.
Syntax 3
margin-top: 25px;
margin-right: 50px;
margin-bottom: 60px;
margin-left: 10px;
This syntax sets the individual margins separately.
Syntax 4
margin: 25px 50px 60px 10px;
This syntax is a shorthand for syntax 3. The four numbers specify the values of the individual margins, starting from the top and continuing in a clockwise direction. Hence top margin is 25px; right is 50px, bottom 60px and left 10px.
In addition to having positive values, margins can have negative values. A negative margin will result in overlapping or hidden content. For instance, if we change the margin of box2 from margin: 20px; to margin: 20px 20px 20px -50px; (i.e. margin-left is changed to -50px), we’ll get the following:
Note that while margins can have negative values, paddings cannot have negative values.
Margins are also commonly used to align block elements. By default, block elements take up the full width available. However, you can change this width using the width property. For instance, the code below changes the width of an element to 80%. You can then center align the element by setting the left and right margins to auto.
width: 80%;
margin: 0 auto;
The margin rule above sets the top and bottom margins to 0px (the unit px is optional if the value is 0) and the left and right margins to auto. When margins are set to auto, the browser will evenly distribute the remaining width to the left and right margin, resulting in a center aligned element.
Border Properties
CSS border properties allow you to set the width, color, style and radius of an element's border.
border-width
To set the thickness of the border, you use the border-width property. Border width is normally set in pixels. Alternatively, you can use one of three predefined values: thin, medium or thick. Border properties are set using the same syntaxes as margins and paddings.
Examples:
border-width: 25px;
will set all borders to 25px.
border-width: 25px thin;
will set the top and bottom width to 25px and the left and right width to thin.
border-top-width: 30px;
will set the top border to 30px.
border-color
To set border color, you use the property border-color. The value of this property can be set by specifying a predefined color name, such as green, red and yellow etc. A total of 140 such names are defined in CSS. The site http://www.w3schools.com/cssref/css_colornames.asp gives a complete list of these names. In addition, you can also set the color to transparent, by writing border-color: transparent;.
Another method to specify border color is to use the RGB notation (e.g. rgb(0,255,0)). All web colors are represented by three primary colors: Red, Green and Blue. If you write rgb(0, 255, 0), it means you want the second color (i.e. green) to have an intensity of 255 (the maximum intensity), and the first and third colors (red and blue respectively) to have an intensity of 0 (the least). This will simply give you the color green.
In addition to using the RGB notation, you can also use the hexadecimal notation, which uses 6 digits to represent color. The first two numbers represent the hexadecimal value for the intensity of ‘red’, the next two represent ‘green’ and the last two represent ‘blue’. Often a color tool is used to generate these hexadecimal values. Check out the site
http://instant-eyedropper.com/ for one such free tool.
Alternatively, you can go to http://html-color-codes.info/ where there’s a color chart for you to select the color that you want. Click on it and you’ll be given the corresponding hexadecimal value.
Examples:
border-color: rgb(255, 0, 0);
will set all borders to red.
border-color: red green;
will set the top and bottom borders to red and the left and right borders to green.
border-top-color: #12005F;
will set the top border to #12005F.
border-style
To set border style, you use the property border-style. The acceptable values are: none, dotted, dashed, solid, double, groove, ridge, inset and outset. For instance, if you write
border-style: solid dotted;
the top and bottom border will be solid while the left and right will be dotted. If you want to set the style individually, you can write
border-top-style: solid;
border-left-style: dotted;
border-radius
The border-radius property is used to create borders with rounded corners. The value is normally given in pixel or percentage.
Border radius can be set individually for the four corners. The four corners are top-left, top-right, bottom-right and bottom-left.
Examples:
border-radius: 5px;
sets the border radii of all corners to 5px.
border-radius: 10px 20px;
sets the top-left and bottom-right (i.e. the two corners diagonally opposite each other) radii to 10px and the top-right and bottom-left radii to 20px.
border-radius: 25px 5px 0 50px;
sets the values of the individual corners, starting from the top-left corner and continuing in a clockwise direction.
border-top-left-radius: 10px;
sets the top-left border radius to 10px.
If the element has width and height of 100px, padding of 20px and border width of 50 px (total width and total height = 100 + 20*2 + 50*2 = 240px), setting the border radius to 120px (240 divided by 2) will give you a circle instead of a square.
Border Shorthand
The border property is a shorthand for specifying border width, style and color in one line, instead of doing it separately. Simply write
border: 5px solid green;
The values are for width (5px), style (solid) and color (green) respectively. Border radius is not included in this shorthand.
Exercise 4
Download the source code for this exercise from http://learncodingfast.com/css and unzip the file. The source code for this exercise can be found in the Chapter 4 - CSS Box Model folder.
Exercise 4.1
1. Open the file Chapter 4 - CSS Box Model.html concurrently in your browser and text editor.
2. Resize your browser window and observe how the gibberish text flows around the bigger box.
3. Modify the CSS declaration for box1 by changing width: 100px; and height: 100px; to each of the following:
(a) width: 200px; height: 200px;
(b) width: 60%;
(c) height: auto; width: auto;
Save the file in the text editor and refresh the page in the browser. Notice what happens to box1 in each case.
4. Now change the width and height of box1 back to 100px and change the text between the tags <div id="box1">...</div> to:
“Learn CSS in One Day and Learn It Well. This example shows what happens when text overflows the dimension of the box.”
Next, add each of the following to the CSS declaration of box1 and notice what happens in each case:
(a) overflow: visible;
(b) overflow: hidden;
(c) overflow: scroll;
(d) overflow: auto;
5. Modify the CSS declaration for box1 by changing margin: 20px; to each of the following and notice what happens to the space around box1 in each case:
(a) margin: 50px;
(b) margin: -50px;
(c) margin: 25px 200px;
(d) margin: 25px 50px 60px 10px;
6. Remove the margin rules for box1 and add the 4 lines below:
margin-top: 25px;
margin-right: 50px;
margin-bottom: 60px;
margin-left: 10px;
Notice any changes to box1? There should be no change as this is the same as 5(d) above.
7. Remove the margin rules for box1 and add the line below:
margin: 0 auto;
Next, change the width of box1 to 80%. Finally, remove the line float: left;. Notice what happens. (We’ll explain what float does in the next chapter). box1 is now center-aligned.
8. Now, let’s work on box2. Modify the CSS declaration for box2 by changing padding: 50px; to each of the following and notice what happens inside box2.
(a) padding: 25px;
(b) padding: -10px; (refer to note below)
(c) padding: 25px 50px;
(d) padding: 25px 50px 60px 10px;
8(b) will not work as paddings cannot have negative values. You’ll just end up with a padding of 0 pixel.
9. Remove the padding rules for box2 and add the 4 lines below:
padding-top: 25px;
padding-right: 50px;
padding-bottom: 60px;
padding-left: 10px;
Notice any changes to box2? There should be no change as this is the same as 8(d) above.
10. Now let's change the border style for box2. Remove the line border: 5px solid black; from the CSS declaration of box2 and add each of the following. Notice what happens to the border in each case:
(a) border-style: solid dotted;
(b) border-style: none dashed double groove;
(c) border-style: inset;
(d) border-style: outset;
11. Next, remove the border-style rule for box2 and add the following:
border-top-style: dotted;
border-left-style: double;
12. Now remove the rules from part 11 and change border style to solid (border-style: solid;)
Next add each of the following rules. Notice what happens to box2 in each case.
(a) border-width: 25px;
(b) border-width: 25px thin;
(c) border-top-width: 30px;
13. Now we are going to change the border color for box2. Try adding each of the following rules:
(a) border-color: rgb(255, 0, 0);
(b) border-color: red green;
(c) border-top-color: #12FF5F;
14. Next, we'll try the border shorthand. Remove all the border properties for box2. Add the following:
border: 5px solid green;
15. Now, let’s try the border-radius property. Try each of the following:
(a) border-radius: 20px;
(b) border-radius: 10px 20px;
(c) border-radius: 25px 5px 0 50px;
(d) border-top-left-radius: 10px;
16. Finally, let’s try to create a circle. First, change the width and height of box2 to 100px, padding to 20px and the property
border: 5px solid green;
to
border: 50px solid green;.
Now, remove all previous rules for border radius and add the following rule:
border-radius: 120px;
You end up with a circle right? That’s because the border radius is half of the total height (and width) of box2.