I’m studying HTML with shay howe and seen this in one of the examples
footer {
margin: 0 1.5% 24px 1.5%;
}
To my understanding, margin: 0 will center a block element. So 1.5% and the others are just added features to the footer ?
I’m studying HTML with shay howe and seen this in one of the examples
footer {
margin: 0 1.5% 24px 1.5%;
}
To my understanding, margin: 0 will center a block element. So 1.5% and the others are just added features to the footer ?
When margin has that format (with 4 values listed) it is specifying the margin around each side of the element in clockwise order (top right bottom left) So… the footer would have margin-top of 0, margin-right of 1.5% margin-bottom of 24px margin-left of 1.5%. Think of this as a shortcut syntax instead of writing out the four values
Hi @lou1130
This code is using shorthand notation, so it reads like this:
footer {
margin: top right bottom left;
}
So in the example, top will be 0px, right will be 1.5%, bottom will be 24px and left will be 1.5%.
The percentage in this case is calculated using the width of the elements parent, so say you had:
<div>
<footer></footer>
</div>
If the div in the example above had a width of 100 px, the right and left margin would be calculated as 1.5px.
As for centering elements, what your thinking of is margin: 0 auto
. This is another form of shorthand that reads margin: top and bottom, left and right
. Auto is the magic sauce that centers a block element, assuming that elements width is smaller than its parent.
I hope this helps!
As an extra note, since the 2nd (right) and 4th (left) values were the same, it could also be written shorter, as:
margin: 0 1.5% 24px;
0 = top
1.5% = left/right
24px = bottom
See the “Margin - Shorthand Property” section on this page for further explanation of this, and of what you’re asking:
http://www.w3schools.com/css/css_margin.asp
Thanks everyone! I was confused with margin: 0 auto and shorthand/longhand properties.
I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.
Thanks! I have been trying to figure that out