Chapter ObjectivesChapter Objectives
4.2 The The B Box ox Model Model
4.2 The The B Box ox Model Model
After you get your backgrounds set you may want to adjust the look, layout, and spacing of the other images or items on the page. While the box model is most frequently used to set the spacing for images, it is important to note that it can be applied to any element.
Other uses may be placing widgets, creating grids, placing buttons, even search forms.
No matter which element you are working with it is done the same way. The box model consists of a spacing system that uses padding, borders, and margins to create the
spacing and look you want. While each of these parts of the box model affect different sections of area around a box ultimately they all simply create space around the chosen item. If all the sides of the property are to be set to the same size then only one value and unit are needed in the statement. However, each of these properties can also be declared to specifically set the top, right, left, or bottom measurements if desired. On a border his would look like:
p {
border-top: 2px ;
border-right: 4px ; border-bottom: 2px ; border-left: 6px ;
}
An example of the HTML that could be styled using the rule shown above may look like:
<html>
<header>
</header>
<body>
<p>
This paragraph will have equal 2px wide borders on the top and bottom. It will have a 4px wide border on the right side of the box, and a 6px wide border on the left side of the box. </p>
</body>
<footer>
</footer>
</html>
4.3 Shorthand 4.3 Shorthand
You can also use shorthand to do the same thing but faster and with less typing. The standard format for shorthand is the property name followed by a colon and then up to four values if you want the top, right, bottom, and left sides to be unique sizes. If both top and bottom will be the same size and right and left spacing will be the same then you can use two values in the shorthand statement. Let’s start with an example of a four value statement. The values are placed in the order of top first, right second, bottom third, and left fourth. Each value is separated only by a space but be sure to include the units unless the value is zero. Remember from earlier units are not needed when the value is zero. Using this technique to set the margin could look like:
p { padding: 2px 5px 7px 5px ; }
Similarly if we were using the two value shorthand it could look like:
p {padding: 5px 4px ; }
4.4 Padding 4.4 Padding
I am sure you have seen an image with a border around it, in some cases the border may not have actually been touching the image but was slightly larger than the image creating a frame type of appearance. This space between the element and the border is called the padding. Padding can be set using the familiar units of px and pt. As you saw in the last
example in section 4.3 padding can be set quickly using shorthand.
4.5 Borders 4.5 Borders
Around the padding is the border which is also set using units of px and pt. Borders can also be styled by setting the border-style property to a value such as solid, groove, hidden, dotted, dashed, double, ridge, inset, outset, initial, inherit, or none. To set only the style this will look like:
#avatar {
border-style: dashed ; {
An example of the HTML containing the image with the ID selector “avatar” that will show with a dashed border due to the rule shown above may look like:
<html>
<header>
</header>
<body> <img src=”/images/profile.jpg” id=”avatar” title=”Avatar Image”/>
</body>
<footer>
</footer>
</html>
You can also modify a borders color, width, or radius. When equal width is used all the ay around the border then the border-width, border-style, and border-color can be set in shorthand all in one line using the border property. You know how I love saving time right? Good then I don’t even have to tell you how nice this is to use. Let’s say we want a solid, 2px wide, green border, the statement would first state the width, then the style, and lastly the color. An example of this border around a sign-up form could be:
#signupform {
border: 2px solid green ; }
Border radius is what makes the corners of the border rounded or not and also sets how round they are. Border-radius uses the px unit. A basic example of these properties may look like:
#contactform { border-radius: 5px ;
}
Border radius can also be used in a shorthand form that allows you to set the radius of individual corners. Again there is also a certain order that the values need to be placed in to code in border-radius shorthand. If all four corners will have a unique value then the order is such that the top-left corner is placed first, top-right corner goes second, bottom-right corner would go third, and the bottom-left corner is last. In cases with
three values the first value goes to the top-left, the second value sets the top-right and bottom-left, while the third sets the bottom right. When there are two values the first
value will set the top-left and bottom-right, and the second value will set the top-right and bottom-left. When there is only one value used all the corners will be set to the same radius.
4.6 Margins 4.6 Margins
Lastly the spacing around the outside of the border is the margin. The margins
measurement values also use the px and pt units. The margin will not have a background color and is transparent. It only clears the space for the border, it does not create any new appearance. The margins value like other shorthand formats can set in the order of top, right, bottom, and then left. You can also set the values of all the sides by using only one value. You can also set each of these to a unique values using the same shorthand system used in the padding example above.
By combining the use of all the above properties you can effectively set the spacing of any block-level element. Although they are most commonly used for images, they will occasionally be needed in other situations as well.
Practica
Practical l Use Exerc Use Exercise Qu ise Questions estions
1. Which HTML elements are block level elements by default?
2. Which property allows you to turn an element into a block level element?
3. What is the order of the box model spacing from the inner element out?
4. What type of units can be used to set the padding and margin?
5. When setting margin, border, or padding to unique sizes on each side of the box in which order are the values placed inside a four value shorthand
statement?
6. Out of all the properties in the box model, which has no background color and is transparent?
Chapter Summary and Exercise Solutions Chapter Summary and Exercise Solutions
The <p> and <div> elements are block level elements by default.
The display property allows you to turn an element into a block-level element.
The inner most item in the box model is the element itself. The first layer outside of the element is the padding. Around the outside of the padding is the border.
The margin goes outside of the border.
The padding and margin properties can be set using pt and px units.
In a shorthand statement with four values the values are placed in the order of top, right, bottom, left.
A margin has no background color and is transparent.