0
Just great
It helps me a lot of things to understand
1 Respuesta
+ 3
Learn the box model. Each element of an html page is a box or rectangle.
Margin is the area outside the box, between it and its neighboring elements. Padding is the area inside the box, between its inner edges and its child elements.
Here the box is black
The padding is yellow
The margin will show blue (top and sides anyway)
Green is whats inside the box
Change the padding and margin of the div to see.
<!DOCTYPE html>
<html>
<head>
<title>Padding & Margin</title>
<style type="text/css">
body {
background: blue;
margin: 0;
padding: 0;
}
div {
border: 2px solid black;
background: yellow;
padding: 20px; /* change me to see the padding grow or shrink (yellow) */
margin: 10px; /* change me to see the margin grow or shrink (blue)*/
}
h1 {
margin: 0;
background: green;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>INSIDE THE BOX</h1>
</div>
</body>
</html>