Отступы <!DOCTYPE html>
Здравствуйте, пытаясь сделать текс-ареа размером всего дива столкнулся с проблемой каких-то отступов снизу. Причем они пропадают если убрать <!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>
|
У многих элементов кроме стилей устанавливаемых пользователем, есть еще стили устанавливаемые браузером по умолчанию.
Когда вы пишете для 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>
|
| Часовой пояс GMT +3, время: 05:03. |