Почему один div чуть больше другого?

Question

[sinevik]

У меня есть родительский div. У него задан размер. У дочернего элемента я ставлю width: 100%. Почему они не одинакового размера? Хочу сделать кастомный выпадающий список и столкнулся с такой проблемой?


Пример кода:
тык

Answer 1

[dethain]

Они одинакового размера, просто один не помещается под ширину другого (50px), у вашего второго ширина 52 (вместе с border), поэтому он уезжает вправо. Можете убедится и поставить своему второму блоку ширину в 48px (будет ровно 50 вместе в border и он четко будет в другом блоке.

Answer 2

[Артём Лукичев]

Там на один пиксель позже начинает идти второй div, так как 1 px - левый бордер. Это можно исправить следующим кодом:

.div1 {
  width: 50px;
  height: 30px;
  position: relative;
  left: -1px;
  border: 1px solid green;
}

.div2 {
  top: 105%;
  width: 50px;
  height: 30px;
  position: absolute;
  left: -1px;
  border: 1px solid red;
}

То есть, мы каждый блок отводим влево на 1px, что компенсирует их бордер