Margin clears an area around the border. And cannot be styled. It's fully transparent.
Border that goes around the padding and content.
Padding clears an area around the content.
Content is where text and images appears.
Define width and height
» EXAMPLE:
<html>
<head>
<style>
#demo {
width: 250px;
height: 100px;
border: 4px solid #03C;
padding: 10px;
}
</style>
</head>
<body>
<div id="demo">
<p>Total width = 250px</p>
<p>Total height = 100px</p>
</div>
</body>
</html>
» Result:
Total width = 250px
Total height = 100px
Total height = 100px
Note: You have to know that >>>
250px width
+ 20px (left + right padding)
+ 8px (left + right border)
= 278px
If You want to make box with total width 250, the final result of the above math must be 250.
More about CSS box styling in the next chapters.
No comments:
Post a Comment