Странно, что столько людей сказали про 102px, но никто не сказал откуда берутся эти 2px..
Всё дело в border: 1px, из-за того, что есть свойство box-sizing, которое по дефолту имеет значение content-box, border будет добавлять ещё и своё значение размера к основному.
Именно так получается, что фактически ваш блок равен следующим размерам:
width = border-left-width + width + border-right-width = 1px + 100px + 1px = 102px
height = border-top-width + height + border-bottom-width = 1px + 100px + 1px = 102px
По этому чтобы расположить блок #block2 на том же уровне, что и block1, вам потребуется указать margin-top: -102px.
#block1 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
}
#block2 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
margin-left: 104px;
margin-top: -102px;
}
<div id="block1"></div>
<div id="block2"></div>
Или указать значение для блоков box-sizing: border-box, тогда размеры border будут "съедаться вовнутрь", тем самым блок всегда будет того размера, которого вы указали.
#block1 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
}
#block2 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
margin-left: 104px;
margin-top: -102px;
}
<div id="block1"></div>
<div id="block2"></div>
А вообще не понятно зачем такое извращение, чтобы расположить элементы горизонтально, давно используют Flexbox
#block1 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
box-sizing: border-box;
}
#block2 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
box-sizing: border-box;
margin-left: 104px;
margin-top: -100px;
animation: BorderWidth 1s linear infinite alternate;
}
@keyframes BorderWidth {
to {border-width: 15px;}
}
<div id="block1"></div>
<div id="block2"></div>