Как исключить «двойную границу» для стековых элементов inline-block с помощью отрицательных полей?

Question

Если мы поместим 3 x 3 элемента встроенного блока вместе, мы знаем, что их границы будут касаться друг друга и «удваиваться»:

span {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  border: 3px dotted #999;
  font: 42px Arial;
  line-height: 60px;
}

<div>
  <span>1</span><span>2</span><span>3</span>
</div>
<div>
  <span>4</span><span>5</span><span>6</span>
</div>
<div>
  <span>7</span><span>8</span><span>9</span>
</div>

Если мы не используем таблицу для этого, некоторые разработчики используют margin-top и margin-left, чтобы исправить это:

margin-top: -3px;
margin-left: -3px;

span {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  border: 3px dotted #999;
  font: 42px Arial;
  line-height: 60px;
  margin-top: -3px;
  margin-left: -3px;
}

<div>
  <span>1</span><span>2</span><span>3</span>
</div>
<div>
  <span>4</span><span>5</span><span>6</span>
</div>
<div>
  <span>7</span><span>8</span><span>9</span>
</div>

Эффект с рамкой 1px:

span {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  border: 1px dotted #999;
  font: 42px Arial;
  line-height: 60px;
  margin-top: -1px;
  margin-left: -1px;
}

<div>
  <span>1</span><span>2</span><span>3</span>
</div>
<div>
  <span>4</span><span>5</span><span>6</span>
</div>
<div>
  <span>7</span><span>8</span><span>9</span>
</div>

Но мы также знаем, что отрицательное поле «перемещает элемент», аналогично

position: relative; top: -3px; left: -3px

И если границы «удваиваются» перемещение каждого элемента «относительно» не собирается это исправить, предположительно. Так как же работает отрицательная маржа? Может ли претензия быть обоснована CSS спецификациями

Answer 1

Вы упомянули следующий код:

position: relative;
top: -3px;
left: -3px;

top: -3px; увеличивает каждый элемент на 3 пикселя. left: -3px; перемещает каждый элемент влево на 3 пикселя.

Поэтому код не решит вашу проблему, поскольку все элементы смещены - вся сетка перемещается в верхний левый угол, а границы по-прежнему удваиваются.

---

margin: -3px; - это что-то другое. Он позиционирует каждую клетку как обычно, но, как будто все они были на 3 пикселя меньше с каждой стороны.

Это означает, что каждая клетка перемещается ближе к соседнему элементу, и границы больше не удваиваются.

Answer 2

margin влияет на макет, в то время как верхний / левый только перемещают элемент из его нормального положения потока, не затрагивая макет.

Вот базовый пример c, чтобы понять разницу:

.box {
  height:50px;
  background:red;
  border:2px solid;
}

<div class="box"></div>
<div class="box" style="margin-top:-50px;"></div>
<div class="box"></div>

Обратите внимание, как мы сдвигаем второй элемент, а третий следует за ним.

Теперь давайте используем top

.box {
  height:50px;
  background:red;
  border:2px solid;
}

<div class="box"></div>
<div class="box" style="top:-50px;position:relative"></div>
<div class="box"></div>

Третий не будет двигаться. top просто повлияет на соответствующий элемент

---

Из спецификации:

относительно

Положение блока рассчитывается в соответствии с нормальным потоком (это называется положение в нормальном потоке). Затем поле смещается относительно его нормального положения. Когда блок B относительно позиционирован, позиция следующего блока рассчитывается так, как если бы блок B не был смещен.

Для поля, как мне кажется, это более тривиально, так как поле является часть модели коробки, как определено здесь . Вы не найдете явного предложения о том, как ведет себя отрицательное поле, но, следуя его логике c, мы можем понять, что отрицательное поле повлияет на блок соответствующего элемента и повлияет на соседние элементы.

Таким образом, отрицательное поле не действительно перемещает элемент так же, как верх / влево.