1

Was looking at the vertical-align property of CSS. I have used it quite a bit and normally you can use it like this:

div {
  background-color: green;
  overflow: hidden;
  height: 100px;
}

#text {
  background-color: powderblue;
  padding: 5px;
  vertical-align: 30px;
}
<div>
  Texttext <span id="text">Texttext</span>Texttext
</div>

However, what I don't understand is that if the vertical-align is changed this can influence the position of the other inline elements (other text in this case)

For example if we change the vertical-align from 30px to -30px:

div {
  background-color: green;
  overflow: hidden;
  height: 100px;
}

#text {
  background-color: powderblue;
  padding: 5px;
  vertical-align: -30px;
}
<div>
  Texttext <span id="text">Texttext</span>Texttext
</div>

The results is that text outside the span (with no vertical-align property) is completely changed from position.

Questions

  1. Why does vertical align also affects other elements besides the element where the property is put on?
  2. Is this anyhow related to line-height? Can line-height change the behaviour of the vertical-align property?
Willem van der Veen
  • 33,665
  • 16
  • 190
  • 155
  • When I tested it, I did not have any problem with vertical-align. It only moved the #text down as expected and did not affect other elements. Can you try again to run it again? – dnp1204 Mar 22 '18 at 15:41
  • But in the first example I provided why is the span pushing the other elements down? – Willem van der Veen Mar 22 '18 at 15:46
  • 1
    It's my bad. I did not see your first example. It is normal to vertical-align. You can see some example here https://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=baseline. – dnp1204 Mar 22 '18 at 15:53
  • If it does not do so, there are no space to move the #text up. If you don't like that behaviour, you can use position: absolute or relative to move your #text up or down – dnp1204 Mar 22 '18 at 15:55
  • I got it now, was looking from the wrong perspective to it. Thanks! – Willem van der Veen Mar 22 '18 at 15:59

0 Answers0