Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

176 CHAPTER 4 Getting started with CSS3


FIGURE 4-10 he CSS box modelT

Setting the border, padding, and margin properties


You can set the border, padding, and margin easily by assigning a value to the corresponding
property, as shown in the following style sheet rule.
p {
border: 10px;
padding: 25px;
margin: 15px;
background-color: yellow;
border-style: solid;
border-color: green;
}

This style sheet rule sets the border width to 10 pixels on all four sides. The padding is set
to 25 pixels on all four sides, and the margin is set to 15 pixels on all four sides. Now consider
the following HTML document and how the style rule affects its rendering.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="default.css" rel="stylesheet" />
</head>
<body>
<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
atomorum mea. Ad vis illum porro disputando, ei eligendi
mandamus liberavisse sea. Sea debet comprehensam no, et
blandit officiis eos, ut per ubique abhorreant
Free download pdf