Padding box не работает

box-sizing | CSS

Блочная модель CSS

По умолчанию margin , padding и border увеличивают коробку элемента и прибавляются к width , если width не имеет значение auto , или height .

изменить margin : (внешний отступ от границы элемента)
изменить border : (граница)
изменить padding : (внутренний отступ от содержимого до границы)

Как сделать, чтобы блок не выходил за границы родителя

Нужно уменьшить width на padding-left и padding-right , а height — на padding-top и padding-bottom : нажать

Как работает свойство box-sizing

При box-sizing: border-box; [w3.org] коробку не растягивают padding и border , они включены в width / height . Есть исключения.

width: 100%; и padding или border

Наиболее частый пример: нажать

box-sizing не работает

При box-sizing: border-box; блок всё же будет расширяться на величину, равную положительному числу из

• padding-right + padding-left + border-right-width + border-left-width — width
• padding-top + padding-bottom + border-top-width + border-bottom-width — height

изменить height :

5 комментариев:

Ivan Это чай сурьезно. А вот вчара спутник запустили. Только там нет моих сайтов)). NMitra Даже думать не хочу что там с факторами ранжирования, но результат вроде отличается от Яндекса и Гугл. У тех есть то, что нет у Спутника — статистика переходов в виде браузеров и счетчиков на сайтах.

Хорошо, что поисковиков много. Главное, чтобы все одинаково читали мета-теги, robots.txt и т.п.

Вебмастера будут ориентироваться на тот, где число посетителей больше. Например, у меня с mail.ru в день идёт около 50 человек (0,6% от общего трафика). Я даже не помню логин от Вебмастера.

Посетители будут посещать чаще тот, у кого выше качество выдачи, и тот, кто рекламирует себя активнее. То есть по телику теперь чаще будем видеть рекламу поисковиков. Вспомним хотя бы Авито.ру. Гугл, например, заключает контракты с учебными заведениями, чтобы те использовали Blogger, чтобы молодёжь привыкала к бренду. Автор Пользоваться будут всегда тем поисковиком, у которого стартовая страница, а стартовая страница там, где основная почта. То есть почта и есть главное для поисковика. Поэтому бинги, спутники и дюк дюк пока в пролете будут. Спутнику ничего не светит пока нет почты и нет нормального индекса. У них свой алгоритм поиска, но очень пока неразвит совсем. NMitra Ой, не всегда так. У меня, например, да — почта основной инструмент. В него стекается инфо из комментариев блога, из оставленных сообщений в соц. сетях, обновления сайтов (я про RSS) и т.д. У многих он есть, но они им (инструментом) не пользуются. Например, у меня муж открывает свою почту раз в ээээ. У отца стартовая страница в браузере — РБК. А у мамы его (email) вроде и нет. Брат предпочитает общение через ВКонтакте и Скайп. Но мы все ищем через поисковик.

И потом, вроде самый большой процент зарегистрированных сидит на mail.ru.

Хотя согласна — почта — это один из сильных инструментов подсадить человека на свои сервисы, такой же как Карта или Новости. Автор Сам Яндекс как то проговорился, не помню где, что почта это основа для поисковика. Они очень трепетно относятся к почте, так как по статистике почта является главным условием работы поисковика. Майловским поиском не особо пользуются, потому что он очень плохой. Хорошо что появился спутник..Это уменьшит монополию яндекса, с их наглыми алгоритмами. В интернете много вранья и мошеничества со стороны их.

Источник

box-sizing

Internet Explorer	Chrome		Opera	Safari		Firefox	Android		iOS
8.0+	4.0+	10.0+	7.0+	3.1+	5.0+	1.0+	2.1+	4.0+	3.2+	5.0+

Краткая информация

Значение по умолчанию	content-box
Наследуется	Нет
Применяется	Ко всем элементам
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-ui/#box-sizing

Версии CSS

Описание

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Ширина блоков

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing .

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing .

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .

Источник

CSS3: свойство Box-Sizing

Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px:

Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing.

Использование box-sizing

У этого свойства есть два значения:

• content-box — по умолчанию, контент внутри div’а будет отображаться по-старому, т.е. как в примере выше: вместо 100х100 будет 140х140
• border-box позволяет значения padding и border вычитать из ширины и длины блока, т.е. в нашем примере div останется с фиксированными параметрами, но для контента останется 60х60 px

Поддержка браузерами

Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+. Актуальные данные можно посмотреть на сайте caniuse.com.

Практический пример

Рассмотрим реальный пример использования свойства box-sizing. Есть меню из пяти пунктов:

Добавим немного CSS, в т.ч. фиксированную ширину меню в 500 px и ширину каждого элемента в 100 px:

Меню выглядит нормально:

Но при добавлении левого или правого border’а последний пункт меню съезжает, потому что не помещается:

Но если использовать box-sizing, то этой проблемы нет:

Источник

Свойство box-sizing

Свойство box-sizing может принимать одно из двух значений – border-box или content-box . В зависимости от выбранного значения браузер по-разному трактует значение свойств width/height .

Значения box-sizing

Для большей наглядности посмотрим на картинку этого div в зависимости от box-sizing :

В верхнем случае браузер нарисовал весь элемент размером в width x height , в нижнем – интерпретировал width/height как размеры внутренней области.

Исторически сложилось так, что по умолчанию принят content-box , а border-box некоторые браузеры используют если не указан DOCTYPE , в режиме совместимости.

Но есть как минимум один случай, когда явное указание border-box может быть полезно: растягивание элемента до ширины родителя.

Пример: подстроить ширину к родителю

Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.

Например, мы хотим, чтобы элементы формы ниже были одинакового размера:

Как сделать, чтобы элементы растянулись чётко по ширине FORM ? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.

Попытка width:100%

Первое, что приходит в голову – поставить всем элементам INPUT ширину width: 100% .

Как видно, не получается. Элементы вылезают за пределы родителя.

Причина – ширина элемента 100% по умолчанию относится к внутренней области, не включающей padding и border . То есть, внутренняя область растягивается до 100% родителя, и к ней снаружи прибавляются padding/border , которые и вылезают.

Есть два решения этой проблемы.

Решение: дополнительный элемент

Можно убрать padding/border у элементов INPUT/SELECT и завернуть каждый из них в дополнительный DIV , который будет обеспечивать дизайн:

В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще – любой интерфейс, где элементов и так много, то лишние нам точно не нужны.

Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов INPUT/SELECT .

Решение: box-sizing

Существует другой способ, гораздо более естественный, чем предыдущий.

При помощи box-sizing: border-box мы можем сказать браузеру, что ширина, которую мы ставим, относится к элементу полностью, включая border и padding :

Мы сохранили «родную» рамку вокруг INPUT/SELECT и не добавили лишних элементов. Всё замечательно.

Свойство box-sizing поддерживается в IE начиная с версии 8.

Источник

Box-sizing: управляем вычислением ширины и высоты

В предыдущем уроке мы рассказывали, по какому принципу традиционно вычисляется ширина и высота элемента. Фактическую ширину/высоту образует сумма значений width / height , padding , border и margin .

Нередко в процессе верстки возникает необходимость управлять стандартным вычислением размеров элемента. Допустим, вы хотите, чтобы ширина определенного блока

Как же сделать так, чтобы браузер учитывал отступы, а иногда и рамку, вычисляя ширину блока? На помощь приходит свойство box-sizing, которое может принимать три значения, а именно:

• content-box — значение по умолчанию (поведение, описанное выше). Ширина и высота элемента определяется только свойствами width и height .
• border-box — в данном случае браузер включает отступы padding и рамку border в общую ширину/высоту элемента. Это значит, что если для блока задана ширина, скажем, width: 50% , отступы (например, padding-left: 10px и padding-right: 10px ) и рамка ( border-width: 1px ), то браузер будет считать эти отступы и рамку частью ширины 50%. Ширина самого содержимого составит 50% минус 22 пикселя. Обратите внимание, что значения margin включены НЕ будут.
• padding-box — это значение похоже на предыдущее, только в ширину/высоту элемента будут включены только отступы padding , без рамки. Значения margin также не учитываются. Значение padding-box было исключено из спецификации CSS, однако оно все еще поддерживается браузером Firefox.

Box-sizing: кроссбраузерность

Чтобы свойство box-sizing работало в браузерах Firefox, а также старых версиях Safari, Chrome и Android, следует записывать несколько его вариаций, используя соответствующие префиксы производителя:

Что же насчет поддержки браузером Internet Explorer? Хорошие новости: box-sizing работает в IE8 и выше.

Итак, CSS-свойство box-sizing поддерживается почти всеми браузерами, кроме IE6 и IE7. Это 97% используемых браузеров, согласно данным с сайта Caniuse. И если у вас нет необходимости в поддержке двух старых версий IE, вы можете смело использовать это свойство (но не забудьте про префиксы!).

Далее в учебнике: контент, выходящий за пределы необходимой области, и свойство overflow, решающее данную проблему.

Источник