178 CHAPTER 4 Getting started with CSS3
some shortcuts to specifying the settings for each side. You can set the properties by specify-
ing top, right, bottom, and left by separating each value with a space as follows.
padding: 1px 2px 3px 4px ;In this example, the top is set to 1 pixel, the right is set to 2 pixels, the bottom is set to 3
pixels, and the left is set to 4 pixels. In addition, if you know that you want the top and bot-
tom to have the same values and the left and right to have the same values, you can assign
the two values so that the first value is the top and bottom setting, and the second value is
the left and right setting. The following example sets the top and bottom to 5 pixels and the
left and right to 15 pixels.
padding: 5px 15px;Quick check
■■From the element outward, describe the box model.Quick check answer
■■An element contains content immediately surrounded by the padding, which is
then surrounded by the border, which is then surrounded by the margin.Positioning elements
The <div> element has been the all-purpose element to use for creating page layouts.
Although there is movement away from using the <div> element in favor of using semantic
markup, the <div> element is still used when style needs to be applied to content that is not
represented with semantic elements.
The <div> element represents a rectangular block of content. Consider the following
HTML document.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="default.css" rel="stylesheet" />
</head>
<body>
<div id="div1">
<p>this is the first div</p>
</div>
<div id="div2">
<p>this is the second div</p>
<div id="div3">
<p>
this is the third div - Lorem ipsum dolor sit amet, salutandi
conceptam sea cu, eos id legimus percipit argumentum. Habeo
ipsum mandamus sit an, aeterno pertinax vim ad, et cibo
Key
Te rms
The <div> element has been the all-purpose element to use for creating page layouts.
Although there is movement away from using the <div> element in favor of using semantic
markup, the <div> element is still used when style needs to be applied to content that is not
represented with semantic elements.
The <div> element represents a rectangular block of content. Consider the following
HTML document.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="default.css" rel="stylesheet" />
</head>
<body>
<div id="div1">
<p>this is the first div</p>
</div>
<div id="div2">
<p>this is the second div</p>
<div id="div3">
<p>
this is the third div - Lorem ipsum dolor sit amet, salutandi
conceptam sea cu, eos id legimus percipit argumentum. Habeo
ipsum mandamus sit an, aeterno pertinax vim ad, et ciboKey
Te rms