Откуда появляется дополнительное пространство вокруг этой текстовой области? - PullRequest
Новая
       12

Откуда появляется дополнительное пространство вокруг этой текстовой области?

0 голосов
/ 12 мая 2018

Я столкнулся со странной проблемой с моим textarea, когда у меня все еще остается место вокруг моего textarea даже после удаления всех стилей.

В приведенном ниже примере я удалил все стили из текстовой области.кроме по умолчанию 2px padding.Заполнение изменяется на 0px при активном / фокусе, но вы все еще можете видеть 1px свободного места.

Я пытался:

  • , даваяКонтейнер с фиксированной высотой и шириной
  • , что дает контейнеру padding: 0;
  • , что дает текстовой области одинаковую фиксированную высоту и ширину
  • , изменяя outline-offset текстовой области на 0

но безрезультатно ..


Вопрос

Откуда берется дополнительный пиксель / пробелот?


Демо: 

.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
}

textarea:focus,
textarea:active {
  outline: none;
  padding: 0;
}
<div class="container">
  <textarea></textarea>
</div>

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

Ваша textarea ширина больше, чем container: 100% + 2px границы + 2px отступа слева + 2px отступа справа

Так используется box-sizing: border-box; в textarea.

Свойство box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента. 

.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

textarea:focus,
textarea:active {
  outline: none;
  padding: 0;
}
<div class="container">
  <textarea></textarea>
</div>
0 голосов
/ 12 мая 2018

Вам нужно использовать box-sizing: border-box; в Техасе или всех элементах.Я рекомендую использовать во всех элементах.

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

* {
  box-sizing: border-box;
}
.container {
  height: 200px;
  width: 500px;
  background: steelblue;
}

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
}

textarea:focus,
textarea:active {
  outline: none;
  padding: 0;
}
<div class="container">
  <textarea></textarea>
</div>
0 голосов
/ 12 мая 2018

просто добавьте box-sizing: border-box; в textarea

textarea {
  resize: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2px; /* textarea default padding */
  border: 1px solid red;
  overflow: auto;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  box-sizing: border-box; // Added
}
...