Проведем ряд опытов и выясним как себя ведет ширина textarea 100% и внутренний padding, без и c применением DOCTYPE
Проведем ряд опытов и выясним как себя ведет ширина textarea 100% и внутренний padding c применением DOCTYPE:
<div style="border:1px dotted #009999; padding:5px; width:45%">
<textarea style="border:1px dotted #FF0000;
width:100%; padding:5px; overflow:auto"></textarea>
</div>
Как вы видите TEXTAREA вышел за родительский DIV, это особенность применения DOCTYPE. Теперь шустро прочти Вывод 1
К сожалению, добавлением 3-го внешнего DIV-а данная проблема тоже не решается:
<div style="border:5px dotted #CCC; width:45%;">
<div
style="margin:7px; padding:5px; border:2px dotted #009999">
<textarea style="border:1px
dotted #FF0000; width:100%; padding:5px; overflow:auto"></textarea>
</div>
</div>
Но проблему можно решить указав внешний margin 17px установленный казалось бы больше нормы:
<div style="border:5px dotted #CCC; width:45%;">
<div
style="border:2px dotted #009999; margin: 5px 17px
5px 5px">
<textarea
style="border:1px dotted #FF0000; width:100%; padding:5px; overflow:auto"></textarea>
</div>
</div>
Почему 17 читай в выводе 2
А теперь примеры с применением TABLE, для тех, кто думает что через TABLE должно отображать верно:
<table border="0" cellpadding="0" cellspacing="0"
style="border:5px dotted #CCC; width:45%">
<tr>
<td
style="border:1px dotted #009999; padding:5px">
<textarea
style="border:1px dotted #FF0000; width:100%; padding:5px; overflow:auto"></textarea>
</td>
</tr>
</table>
И опять проблема исчезает, если указать внешний margin:17px (казалось бы больше нормы):
<table border="0" cellpadding="0" cellspacing="0"
width="45%" style="border:5px dotted #CCC">
<tr>
<td>
<div
style="margin: 5px 17px 5px 5px; border:2px dotted #009999">
<textarea
style="border:1px dotted #FF0000; width:100%; padding:5px; overflow:auto"></textarea>
</div>
</td>
</tr>
</table>
И на последок, пример под названием - спрячем лишнее:
<div style="overflow: hidden; width:
30px; border:1px dotted #009999;padding:5px">
<div
style="border:1px dotted #FF0000; width:100%; margin-right:15000px">9876543210</div>
</div>
Как видите, главным моментом здесь является overflow:
hidden, который дочерним элементам не позволяет показывать все то, что является
по ширине больше чем основной родительский! При этом, margin-right:15000px никак не влияет на горизонтальный скроллбар
Выводы использования DOCTYPE:
1. если внутреннему элементу (например TEXTAREA) указать 100%, то можете
считать что ширину он позаимствует у своего родителя (например DIV) без
учета pading, но с учетом margin. При этом, если внутреннему элементу (например
TEXTAREA) указать такой же margin что и у родительского элемента (например DIV),
то он сработает, но никак не повлияет на него (на DIV) и родительский элемент
по ширине останется такойго же размера! Для интереса показываю следующий тест:
<div style="border:2px dotted #009999; padding:5px; width:45%">
<textarea style="border:1px dotted #FF0000;
width:100%; padding:5px; overflow:auto; margin-right:1234px">у
данного элемента TEXTAREA margin-right:1234px, обратите внимание на родительский DIV - ширина осталась прежней, но появился горизонтальный скроллбар у окна браузера!</textarea>
</div>
2. число 17 находится по сумме отступов для DIV - справа, для TEXTAREA - слева! Считать будем так:
DIV с margin-right:5px + TEXTAREA с padding-left:5px + TEXTAREA с
padding-right:5px + TEXTAREA border-left:1px + TEXTAREA border-right:1px = 17px
Кому описанного выше было недостаточно, советую почитать об этом более детально»
Поздравляю Вас, теперь Вы гуру DOCTYPE, а особо любопытным можно взглянуть на примеры описанные выше, но уже без применения DOCTYPE:
