Форум

fori · #1 (**permalink**) 11.02.2021, 15:59

Здравствуйте, пытаясь сделать текс-ареа размером всего дива столкнулся с проблемой каких-то отступов снизу. Причем они пропадают если убрать <!DOCTYPE html> Подскажите пожалуйста как ето работает и где я ошибся))

<!DOCTYPE html>
<div class="chat">
<textarea class="chat__text-area"></textarea>
</div>
<style>
.chat {
  width: 40%;
  height: 40%;
  background: black;
}
.chat__text-area {
  width: 100%;
  height: 100%;
  background: green;
}
</style>

<div class="chat">
<textarea class="chat__text-area"></textarea>
</div>
<style>
.chat {
  width: 40%;
  height: 40%;
  background: black;
}
.chat__text-area {
  width: 100%;
  height: 100%;
  background: green;
}
</style>

voraa · #2 (**permalink**) 11.02.2021, 16:28

У многих элементов кроме стилей устанавливаемых пользователем, есть еще стили устанавливаемые браузером по умолчанию.
Когда вы пишете для textarea
width: 100%;
это вы устанавливаете ширину клиентской части в 100% от родительского div. Но браузер дополнительно приписывает для textarea

padding:2px;
border: 1px solid black;

Поэтому общая ширина оказывается больше.

Надо либо скинуть стили браузера, либо устанавливать размеры всей textarea, а не только клиентской части
Кроме того стиль по умолчанию для textarea - inline-block. Из-за этого браузер может по своему выравнивать базовую линию первой строки textarea со строкой родительского элемента. Может чуть приподнять элемент или опустить.
Проще установить для нее display: block

<!DOCTYPE html>
<div class="chat">
<textarea class="chat__text-area"></textarea>
</div>
<style>
.chat {
  position: relative;
  width: 40%;
  height: 40%;
  background: black;
}
.chat__text-area {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  background: green;
}
</style>

Форум

Справочник

Discord чат

Курсы javascript