Set the margin in an element
An element has four sides: right, left, top and bottom. Themargin is the distance from each side to the neighboring element (or the borders of the document). As the first example, we will look at how you define margins for the document itself i.e. for the element
<body>. The illustration below shows how we want the margins in our pages to be.
The CSS code for this would look as follow:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
body {
margin: 100px 40px 10px 70px;
}
<p>:
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
Set padding in an element
Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:
h1 {
background: yellow;
}
h2 {
background: orange;
}
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
No comments:
Post a Comment