Ширина 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 коммент полезен : +4 # Maxsof (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

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

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