Показать сообщение отдельно
  #2 (permalink)  
Старый 11.02.2021, 16:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

У многих элементов кроме стилей устанавливаемых пользователем, есть еще стили устанавливаемые браузером по умолчанию.
Когда вы пишете для 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>

Последний раз редактировалось voraa, 11.02.2021 в 16:57.
Ответить с цитированием