css - Relative positioning on :hover -

on hover use relative positioning top value -0.3em. expect div move , second div move too. insted of have white gap between both divs. why happen , how can solve this?

.one {      width: 3em;      line-height: 3em;      background: yellow;    }    .two {      width: 3em;      line-height: 3em;      background: red;  }    .one:hover {      line-height: 3.3em;      position: relative;      top: -0.3em;  }

<div class="one">one</div>  <div class="two">two</div>

use negative margin on .one instead:

.one {      width: 3em;      line-height: 3em;      background: yellow;    }    .two {      width: 3em;      line-height: 3em;      background: red;  }    .one:hover {      margin-top: -0.3em;  }

<div class="one">one</div>  <div class="two">two</div>

since relative positioning not change position of element in document flow using top: -0.3em not cause .two move 0.3 em.