Just great

It helps me a lot of things to understand

12th Feb 2017, 11:37 PM

Bejtush Cimili

1 Answer

+ 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>

13th Feb 2017, 3:11 AM

ChaoticDawg