Margin in percentage is relative to what?

Question

I’m currently seeing a youtube video on how to create a responsive website. It, at a certain moment (minute 24.55), establishes the margin of an image in percentage, instead of using normal pixels. What I don’t understand is what width or length the percentage is relative, that is these 2% are in relation to what width? And the 0 what exactly is it for? (I have a certain intuition, but with css the intuitions, honestly, serve the little).

.mainheader img{
    width:30%;
    height:auto; /* automatically determines the height*/
    margin: 2% 0;
}

In general, the percentages are relative to what?

Answer 1

It is relative to the upper block length.

#yellow {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border-bottom: 2px solid black;
}
.red {
  width: 50%;
  height: 25px;
  background-color: red;
  border-bottom: 1px solid black;
}
.green {
  width: 50%;
  height: 50%;
  background-color: green;
  margin-left: 50%;
}
.blue {
  background-color: blue;
  height: 50%;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

<div id="yellow">
  <div>
    <div class="red"></div>
    <div class="red">
      <div class="green"></div>
    </div>
  </div>
  <div class="blue"></div>
</div>
<div id="white">
  <div>
    <div class="red"></div>
    <div class="red">
      <div class="green"></div>
    </div>
  </div>
  <div class="blue"></div>
</div>

Answer 2

The percentage value is relative to the upper block (in this case the block containing the element in question).

In your case the image margins within a class element .mainheader will distance into 2% top and "footer".

Example:

In the following image we have the upper element defined with 900px fixed width, and a child element that has as width (width) 50% of the top element (corresponding to 450px).

As to the 0 after the percentage value serves to define the margin given in relation to the top and footer(bottom). Here you might understand better.

---

Here are the ways to define the margin(I used pixel more could be another unit):

.elementoTeste { margin: 2px }         /* all margins set to 2px */
.elementoTeste { margin: 1px 2px }     /* top & bottom = 1px, right & left = 2px */
.elementoTeste { margin: 1px 2px 3px } /* top=1px, right=2px, bottom=3px, left=2px */

Answer 3

About the use of percentage:

As they said, it refers to the upper block, but has to take some care, because the reference measure is the first upper block WHICH HAS AN ESTABLISHED MEASURE, that is, if the immediately preceding layer FOR A BLOCK does not have a valid measure, the percentage will use the previous one as reference, provided that there is a usable value...

About the "margin: 2% 0":

Some CSS properties are merged into just one, for example:

margin: = margin-top: + margin-right: + margin-bottom: + margin-left:

Following example:

.AllMargin { 
    margin: 50px; // top-right-bottom-left: 50px
}  

.MarginVertical { 
    margin: 50px 0; // top-bottom: 50px, right-left: 0
}

.MarginHorizontal { 
    margin: 0 50px; // top-bottom: 0, right-left: 50px
}

.TresMargins { 
    margin: 100px 10px 50px; // top: 100px, right-left: 10px, bottom: 50px
}
.QuatroMargins{
    margin: 5px 10px 20px 30px; // top: 5px, right: 10px, bottom: 20px, left: 30px
}

The same happens in properties like: padding, border, border-style, border-color, always remembering that the order for the 4 parameters of these properties is top right bottom left (clockwise from the top)...

Other properties that aggregate various properties within is the box-shadow, the background and the filter, for example, but in these parameters are other.

Answer 4

In the specified case it would be relative to 100% of the ". mainheader", that is, the img would be away 2% at the top and footer of the 100% mainheader