Page 202 - Webapplication11_C11_Flipbook
P. 202
border-width: It specifies the width of the border.
border-style: It specifies the style of the border (e.g., solid, dashed, dotted).
border-color: It specifies the color of the border.
border-top: It specifies the border on the top side.
border-right: It specifies the border on the right side.
border-bottom: It specifies the border on the bottom side.
border-left: It specifies the border on the left side.
Ð ÐMargin: The space outside the border, separating this box from other elements on the page. Margins are transparent
and do not have a background colour. It can take following values:
Margin: It specifies the margin area on all four sides of an element.
margin-top: It specifies the margin area on the top side.
margin-right: It specifies the margin area on the right side.
margin-bottom: It specifies the margin area on the bottom side.
margin-left: It specifies the margin area on the left side.
Ð ÐBox Sizing: It specifies how the total width and height of an element are calculated. It can take following values:
content-box: Width and height apply to the content only. Padding and border are added outside the content.
border-box: Width and height include padding and border. The content size is adjusted to fit within the specified
dimensions.
Let us create a web page using CSS box model.
<!DOCTYPE html>
<head>
<title>CSS Box Model Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"> This is a box </div>
</body>
</html>
Let us create a CSS file to apply the style.
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid blue;
margin: 10px;
background-color: lightyellow;
color: black;
box-sizing: border-box;
}
200 Touchpad Web Applications-XI

