CSS Box Model
Box
A model box has four elements-
1.Margin
2.Border
3.Padding
4.Content
We will create a box that will contain following properties:
width: 300px;
padding:10px;
border:5px solid gray;
margin:20px
Total width Size=300+(10+10)+(5+5)+(20+20)=370px
width: 300px
10px Padding (left+right)
5px Boder(left+right)
20px Margin(left+right)
= 370px
Example: 1
<html>
<head>
<style>
</head>
<body>
<p> This box’s total width is 370px.</p>
</body>
</html>
<head>
<style>
p{
width: 300px;
padding:10px;
border:5px outset red;
margin:20px;
}
</style>width: 300px;
padding:10px;
border:5px outset red;
margin:20px;
}
</head>
<body>
<p> This box’s total width is 370px.</p>
</body>
</html>
Output
This box’s total width is 370px.
We can create similar box using <div> tag.
Example: 2
<html>
<head>
<style type="text/css">
</head>
<body>
<div class="model-box">This box’s total width is 370px.</div>
</body>
</html>
<head>
<style type="text/css">
div.model-box
{
width: 300px;
padding:10px;
border:5px outset red;
margin:20px;
}
</style>{
width: 300px;
padding:10px;
border:5px outset red;
margin:20px;
}
</head>
<body>
<div class="model-box">This box’s total width is 370px.</div>
</body>
</html>
Output
This box’s total width is 370px.
No comments:
Post a Comment