TL; DR
Идея состоит в том, чтобы сохранить border для обоих. Вместо none просто сделайте цвет transparent, чтобы размер (включая рамку + отступ) всегда был одинаковым для обоих.
div.test {
background-color: red;
box-sizing: border-box;
display: inline-block;
border: 5px solid;
text-align: center;
padding: 50px;
}
div.test:first-of-type {
border-color: transparent;
}
<div class="test">aa</div>
<div class="test">aa</div>
Почему?
При установке height / width вы явно определяете, что оба они должны иметь фиксированный размер, и этот размер будет включать рамку, отступы и содержимое. Как мы можем прочитать в документации :
бордюрный ящик
говорит браузеру учесть любые границы и отступы в
значения, которые вы указываете для ширины и высоты элемента. Если вы установите
ширина элемента до 100 пикселей, что 100 пикселей будут включать любые
границы или отступы, которые вы добавили, и окно содержимого будет уменьшаться, чтобы поглотить
эта дополнительная ширина .
И
Здесь размеры элемента рассчитываются следующим образом: width = border +
отступы + ширина содержимого и высота = границы + отступы + высота
содержания .
Теперь предположим, что вы добавили отступ 45px с рамкой 5px. В этом случае оба поля будут равны, но вы заметите, что поле с границей будет иметь высоту / ширину 0 для содержимого, потому что мы уже достигли 100px с отступами и рамкой (45px*2 + 5px*2 = 100px), но другое поле будет осталось место для контента:
div.test {
background-color: red;
box-sizing: border-box;
display: inline-block;
border: 5px solid;
text-align: center;
padding: 45px;
height:100px;
width:100px;
vertical-align:middle;
}
div.test:first-of-type {
border:none;
}
<div class="test">aa</div>
<div class="test">aa</div>
Теперь, если мы начнем увеличивать отступы, в первом блоке все еще есть содержимое, которое нужно сжать (10px), а во втором нет! В этом случае border-box и фиксированная ширина / высота не будут иметь никакого эффекта, потому что border + padding превысил 100px (46px*2 + 5px*2 = 102px). Вот почему, начиная с 45px отступов, мы видим разницу между обоими боксами и стратами от 50px заполнений, у обоих боксов не будет содержимого для сокращения, НО во втором боксе больше границ, что логически увеличивает его размер. Также становится бесполезным определять ширину или высоту.
Другими словами, border-box применяется только тогда, когда padding + border < width/height, потому что только в этом случае у нас все еще есть содержимое для сжатия.
Вот лучшая иллюстрация с большей границей, и вы увидите, что у нас есть 3 состояния. (1) когда у обоих есть контент для сжатия (2) когда только у одного есть контент для сжатия (3) когда у обоих нет контента для сжатия:
div.test {
background-color: red;
box-sizing: border-box;
display: inline-block;
vertical-align:top;
border: 30px solid;
text-align: center;
padding: 5px;
width:100px;
height:100px;
animation:pad 10s infinite linear alternate;
}
div.test:first-of-type {
border:none;
}
@keyframes pad {
0% {padding:5px}
33% {padding:20px}
66% {padding:50px}
100% {padding:100px;}
}
.change:after {
content:"";
animation:change 10s infinite linear alternate;
}
@keyframes change {
0%,33% {content:" (1): same size for both and fixed width/height are respected "}
33.1%,66% {content:" (2): The second box has no more content to shrink, it starts growing (fixed height/width and border-box has no effect)"}
66.1%,100% {content:" (3): Both boxes has no more content to shrink, they will keep growing BUT the second one has more border so bigger size"}
}
<p class="change">we are at state </p>
<div class="test">aa</div>
<div class="test">aa</div>
Чтобы избежать этого, мы сохраняем одинаковые отступы / границы для обоих элементов, как мы изначально говорили.