У меня есть контейнер с верхним/нижним отступом - его нельзя удалить или поменять местами для поля.
Я пытаюсь создать искусственную границу (синяя линия) справа от зеленого поля, используя псевдоэлемент.
Желтая область существует только для того, чтобы показать, что у зеленого поля есть отступы (я обрезал фон).
Проблема, с которой я сталкиваюсь, заключается в том, что когда я использую высоту 100% для псевдо, он наследует полную высоту родителя, включая отступы, однако я хочу, чтобы мой элемент границы был той же высоты, что и зеленое поле.
Я МОГУ получить размер отступа (и я знаю, как использовать функцию calc), но это потребует многочисленных медиа-запросов, потому что отступы изменчивы, а я пытаюсь этого избежать.
Итак, мне было интересно, есть ли другой способ сделать синюю рамку той же высоты, что и зеленая рамка.
.container {
margin: 25px;
}
.box-wrapper {
background-color: yellow;
}
.box {
box-sizing: border-box;
height: 200px;
width: 200px;
padding: 40px 0;
background-color: lime;
background-clip: content-box;
position: relative;
}
.box::before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 5px;
background-color: blue;
right: -20px;
}
<div class = "container">
<div class = "box-wrapper">
<div class = "box"></div>
</div>
</div>
Вы можете наследовать тот же отступ, а также обрезать фон:
.container {
margin: 25px;
}
.box-wrapper {
background-color: yellow;
}
.box {
box-sizing: border-box;
height: 200px;
width: 200px;
padding: 40px 0;
background-color: lime;
background-clip: content-box;
position: relative;
}
.box::before {
content: "";
display: block;
position: absolute;
top:0;
height: 100%;
width: 5px;
background-color: blue;
background-clip: content-box;
padding:inherit;
box-sizing: border-box;
right: -20px;
}
<div class = "container">
<div class = "box-wrapper">
<div class = "box"></div>
</div>
</div>
Это здорово, Темани - мне никогда раньше не приходилось наследовать отступы, поэтому мне никогда не приходило в голову, что я могу это сделать.