-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbox_model.html
51 lines (36 loc) · 1.46 KB
/
box_model.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!Doctype html>
<html>
<head>
<style type="text/css">
div.width
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
<title>CSS Box Model</title>
</head>
<body>
<h1>CSS Box Model</h1>
<h4>All html elements can me considered as boxes</h4>
<p>These boxes consist of these items from outmost to inmost:</p>
<ul>
<li>margins - clears an area around the border. The margin does not hawe a background color, it is completely transparent</li>
<li>borders - a border that goes around the padding and content. The border is affected by the background color of the box</li>
<li>padding - clears an area around the content. The padding is affected by the background color of the box</li>
<li>actual content</li>
</ul>
<h4>The box model allows us to place a border around elements and space elements in relation to other elements.</h4>
<h4>Width and Height of an Element</h4>
<p>
When you set the width and height properties of an element with CSS, you just set the width and height of the content area To calculate the full size of an element, you must also add the padding, borders and margins.
</p>
<img src="www.w3schools.com/css/250px.gif" width="250" height="1" /><br /><br />
<div class="width">
The line above is 250px wide.<br />
The total width of this element is also 250px.
</div>
</body>
</html>