0

I have the following code, after apply margin-top to one of the divs eg. #two, all divs have margin-top: 20px.

Does relative margin-top apply to all siblings if one of divs defined?

.item {
  position: relative;
  display: inline-block;
}

#two {
  margin-top: 20px;
}
<div class='block'>
  <div class='item'>One</div>
  <div class='item' id='two'>Two</div>
  <div class='item'>Three</div>
  <div class='item'>Four</div>
</div>
viscroad
  • 203
  • 2
  • 9

2 Answers2

1

That's because all .item has a default vertical-align: baseline (due to display: inline-block). You can add vertical-align: top to either #two or .item, depending on what you want to achieve:

.item
{
  position: relative;
  display: inline-block;
  vertical-align: top;
}
#two
{
  margin-top: 20px;
}
<div class="block">
  <div class="item">One</div>
  <div class="item" id="two">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
</div>
Passerby
  • 9,715
  • 2
  • 33
  • 50
-1

Use Flex and make it simple.

.flex {
  display: flex;
}

#two {
  margin-top: 20px;
}
<div class="flex">
  <div class="item">One</div>
  <div class="item" id="two">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
</div>
Hassan Siddiqui
  • 2,799
  • 1
  • 13
  • 22