Ширина textarea 100% и внутренний padding - решение есть!

Проведем ряд опытов и выясним как себя ведет ширина 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>



И на последок, пример под названием - спрячем лишнее:

9876543210

<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:

Оцени публикацию:
  • 34,133
Оценили человек: 34

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Спасибо! (yea)
    01 октября 2010, 03:43 коммент полезен : +3 # Maxsof (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » HTML »