Understanding HTML

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

2 Likes

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!

2 Likes

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

2 Likes

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.

1 Like

Thanks! I have been trying to figure that out

1 Like