CSS margin and padding
Internal indentation is an empty space between the contents of an element and its border (if it is set). To add and control the width of the internal indentation on all four sides of the element, use the CSS padding property.
Outer indentation is an empty space that separates an element from other elements or edges of the browser window. To add and control the width of the outer indents from all four sides of the element, use the CSS margin property.
CSS properties padding and margin can take from one to four values:
padding: 10px 15px 22px 18px; margin: 10px 15px 22px 18px;
Where values are set clockwise, starting from the top:
If the properties specify only one value, then the indents on all sides will be the same width.
At first glance, the visible effect when using these properties looks the same to notice the visual difference between them, for example you can set a border for an element or set a background:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
p {
border: 3px dashed #ffffff;
background-color: #0066FF;
color: #ffffff;
padding: 15px; /*Internal indentation for all sides*/
margin: 25px; /*Outer indentation for all sides*/
}
</style>
</head>
<body>
<p>The usual paragraph.</p>
</body>
</html>
Try it »
For indents, as well as for borders, there are properties that allow you to control the size of the indentation from each side separately. Internal indentation is regulated by CSS properties: padding-top, padding-right, padding-bottom and padding-left. External indentation are regulated by the CSS properties: margin-top, margin-right, margin-bottom and margin-left.
Note: the values of padding and margin properties are not inherited by child elements, so you need to specify the width of the indents separately for each element that they need.
With this theme look: