Почему существует разница между шириной текстовой области и границей простого div?

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать простой html div только с его границами, который расширяется и сжимается вместе с текстовой областью. Мне удалось закодировать необходимый js, чтобы сделать это, но я всегда получаю небольшой разрыв * около 2-3 пикселей между 2 элементами, а также в их позиции по умолчанию, когда они расширяются. Есть идеи, как это исправить?

* Кажется, что во фрагменте нет пробела, но есть пробел, когда я пытаюсь использовать его в chrome, FF и edge.

доказательство :

 <html>

<body>
  <div id="small-box"></div>
  <textarea id="textarea" onmousemove="resizeBoxWidth()"></textarea>
  <style>
    #small-box {
      font-size: 30;
      text-align: center;
      line-height: 3.5;
      top: 40px;
      left: 40px;
      width: 450px;
      height: 100px;
      border-color: black;
      border-style: solid;
      border-width: 3px;
      position: absolute;
    }
    
    #textarea {
      min-height: 100px;
      max-height: 100px;
      border-width: 3px;
      border-color: black;
      top: 150px;
      left: 40px;
      width: 450px;
      height: 100px;
      position: absolute;
    }
  </style>
  <script>
    function resizeBoxWidth() {
      var smallBox = document.getElementById("small-box");

      var textarea = document.getElementById("textarea");

      smallBox.style.width = textarea.style.width;

    }
  </script>
</body>

</html>

1. Вы забыли добавить единицу измерения размера. Поэтому попробуйте добавить: border-width: 3px;

2. Это может быть разница в box-sizing настройках по умолчанию между элементами.

Ответ №1:

Это связано с box-sizing , который определяет, как width вычисляется, цитируя MDN:

По умолчанию в модели CSS box ширина и высота, которые вы назначаете элементу, применяются только к элементу content box . Если элемент имеет какую-либо границу или отступ, это затем добавляется к ширине и высоте, чтобы получить размер поля, отображаемого на экране.

Если вы зададите каждому элементу одинаковую box-sizing настройку, размер будет рассчитан таким же образом и будет иметь одинаковый размер.

 function resizeBoxWidth() {
  var smallBox = document.getElementById("small-box");
  var textarea = document.getElementById("textarea");
  smallBox.style.width = textarea.style.width;
}

 #small-box {
  font-size: 30;
  text-align: center;
  line-height: 3.5;
  top: 40px;
  left: 40px;
  width: 450px;
  height: 100px;
  border-color: black;
  border-style: solid;
  border-width: 3px;
  position: absolute;
  box-sizing: border-box;
}

#textarea {
  min-height: 100px;
  max-height: 100px;
  border-width: 3px;
  border-color: black;
  top: 150px;
  left: 40px;
  width: 450px;
  height: 100px;
  position: absolute;
  box-sizing: border-box;
}

 <div id="small-box"></div>
<textarea id="textarea" onmousemove="resizeBoxWidth()"></textarea>

Ответ №2:

При кратком просмотре с помощью инструмента проверки я обнаружил, что значение textarea по умолчанию содержит значение, padding: 2px; которое влияет на положение и ширину текстовой области.

В отличие от div, которые не содержат никаких атрибутов pervious.

Осмотр