CSS Text margins vh-CodePudding

I was working on a project and started working on texts when I realized that if a set the margin-top: 20vh property on CSS does not work, why? Please help me.

#text1 {
  margin-top: 26vh;
}

#text2 {
  float: right;
  margin-right: 15mm;
  margin-top: 22vh;
}

#text3 {
  float: left;
  margin-top: 37vh;
}

<section  id="image2" style="background-image: url(Images/Loop.gif)">
  <div  id="progressionBar"></div>
  <div  id="firstParagraph"></div>
  <div  id="secondParagraph"></div>
  <div  id="thirdParagraph"></div>
  <div  id="bar1"></div>
  <div  id="bar2"></div>
  <div  id="bar3"></div>
  <h1  id="title">Some Text</h1><br>
  <p  id="text1">Subtitle 1</p><br>
  <p  id="text2">Subtitle 2</p><br>
  <p  id="text3">Subtitle 3, <a> with a link, </a> <a>Another one</a><br> <a>and another one</a></p>
</section>

If you need any informations please ask and I will provide additional informations, thank you so much for the help.

CodePudding user response：

Here I made a demo stripping away some details from your code that were just adding noise for the sake of better showing what's going on.

As the mdn docs says:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

1vh = 1% of the viewport's height

I included that quote just to avoid any ambiguity but it was pretty clear already.

In this demo I just used one single custom css property to decide the margin-top value and used that value to set the margin-top of all the 3 #text elements and to size the ::before element used as a placeholder to highlight the margin like it was a ruler.

The value of that variable is going to be 10vh so 10% of viewport's height.

As you can see running the demo at full screen, if you resize the window, those distances will indeed change as expected.

:root {
  --margin-top: 10vh;
}

* {
  margin: 0;
  padding; 0;
}

#text1, #text2, #text3 {
  margin-top: var(--margin-top);
}

.title {
  border: solid 1px;
}

.subtitle {
  position: relative;
  border: solid 1px blue;
}

.subtitle::before {
  content: '';
  position: absolute;
  height: var(--margin-top);
  border: solid 1px red;
  width: 0px;
  top: calc(-1 * var(--margin-top) - 1px); /*here it's doing -1px to account for border*/
  left: 5px;
}

<section  id="image2">
  <h1  id="title">Some Text</h1>
  <p  id="text1">Subtitle 1</p>
  <p  id="text2">Subtitle 2</p>
  <p  id="text3">
    Subtitle 3,
    <a> with a link, </a>
    <a>Another one</a>
    <br>
    <a>and another one</a>
  </p>
</section>

Anyway the whole truth is also that I removed the <br>s that were going to add vertical spaces hard to discern from margins and more importantly I also removed the float left and right because they affect the positioning in relation to the document flow.

So for the sake of completeness this is the same exact demo with those styles added to show the difference:

:root {
  --margin-top: 10vh;
}

* {
  margin: 0;
  padding; 0;
}

#text1, #text2, #text3 {
  margin-top: var(--margin-top);
}

#text2{
  float: left;
}

#text3{
  float: right;
}

.title {
  border: solid 1px;
}

.subtitle {
  position: relative;
  border: solid 1px blue;
}

.subtitle::before {
  content: '';
  position: absolute;
  height: var(--margin-top);
  border: solid 1px red;
  width: 0px;
  top: calc(-1 * var(--margin-top) - 1px); /*here it's doing -1px to account for border*/
  left: 5px;
}

<section  id="image2">
  <h1  id="title">Some Text</h1>
  <p  id="text1">Subtitle 1</p>
  <p  id="text2">Subtitle 2</p>
  <p  id="text3">
    Subtitle 3,
    <a> with a link, </a>
    <a>Another one</a>
    <br>
    <a>and another one</a>
  </p>
</section>

So to make it short, to me the margin is correctly applied. So I'm not sure I'm answering to the exact issue you are encountering. As an added consideration maybe you are fighting against the margin collapsing and in case that's an option, here is the related info from mdn:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing