Почему элемент css before автоматически добавляет нижнее позиционирование -1px - PullRequest
Новая
       12

Почему элемент css before автоматически добавляет нижнее позиционирование -1px

0 голосов
/ 12 февраля 2019

Я пытаюсь выровнять две коробки с одинаковыми размерами.Первый - это div, а второй - это :before псевдоэлемент div, но по какой-то причине псевдоэлемент расположен с -1px внизу, а прямоугольники не выровнены.Я не могу понять, почему это так.Кажется, браузер добавляет расстояние позиционирования без всякой причины, и когда граница удаляется, все работает.Это ошибка браузера или я что-то не так делаю. 

div {
	position: relative;
	width: 50px;
	height: 50px;
	border: 1px solid;
}

div::before {
	position:absolute;
	content: '';
	left: 50px;
	width: 50px;
	height: 50px;
	border: 1px solid;
}
<div></div>

1 Ответ

0 голосов
/ 12 февраля 2019

Содержимое <div> - это только то, что находится внутри границы.Сама граница не является частью содержимого <div>, к которому относится ::before.::before ведет себя так, как и ожидалось, потому что его позиция top относится к области содержимого <div>, а не к <div>, включая ее границу.Если вы измените границу на 2px, вы заметите, что разница будет 2px.top из -1px действительно решит эту проблему, но не в общем виде.

Лучший способ решить эту проблему - использовать контейнер <div>, служащий в качестве относительного блока вместо владельца<div> из ::before: 

    .container {
      position: relative;
    }
 
    .inner {
	  width: 50px;
	  height: 50px;
	  border: 1px solid;
    }

    .inner::before {
	  position:absolute;
      top: 0;
	  content: '';
	  left: 50px;
	  width: 50px;
	  height: 50px;
	  border: 1px solid;
    }
    <div class="container">
       <div class="inner"></div>
    <div>

Другим способом будет использование значения outline или тени-тени: box-shadow: 0 0 0 1px black;.Они не влияют на размер <div>, использующего его.

...