Как установить размер блока css

Как изменить размер блока в html

Общий размер любого блока складывается из нескольких значений свойств. Которые можно рассмотреть на схеме:

Схема: Размеры блока CSS

  • Основной размер блока (в нем расположен основной контент блока — изображение, видео, текст или всё сразу) задается с помощью css свойств width (ширина) и height (высота блока)
  • Далее вокруг основного блока идут поля (внутренний отступ — padding) с помощью них мы задаем отступ основного контента от краев рамки
  • Следующий слой — border (рамка) не трудно догадаться за что отвечает данное свойство
  • Последний слой из которого состоит общий размер блока — это внешний отступ margin с помощью этого CSS свойства задается отступ между блоками

Задание размеров блоков

Таким образом, мы узнали, что общие размеры — это ничто иное, как сумма значений всех перечисленных выше свойств. И всеми этими свойствами мы можем с легкостью манипулировать.

Свойство box-sizing

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

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

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

Примечание:Если у вас не работает данное свойство в браузере Chrome, то допишите еще для него это правило отдельно

Как задавать в css размер блока

Как задавать в css размер блока

Дело в том, что не все фрагменты на веб-странице – блоки. Элементы вообще делятся на блочные и строчные. Вторые могут спокойно записываться в одну строку и при этом им не нужно ничего дополнительно прописывать. Простой пример строчного элемента – ссылка. На одной строке может быть сколько угодно ссылок, пока они будут помещаться на ней.

Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.

Рис. 1. Основные свойства, которые помогают задать размер

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Простые свойства для размеров

Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.

Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.

Размер в пикселях

В пикселях записывают так называемые абсолютные значения. Например, весь сайт должен находиться в контейнере шириной 1000 пикселей. Создается этот блок и ему пишется ширина.

Если записано так, то ширина контейнера не будет меняться ни под каким предлогом. При изменении масштаба или уменьшении окна она будет оставаться прежней. Размер сайта не уменьшится и при необходимости появится горизонтальная полоса прокрутки.

Это так называемые фиксированные шаблоны. Сегодня все еще много сайтов работают таким образом. Например, социальная сеть Вконтакте. Попробуйте на компьютере уменьшить размеры окна и вы увидите, что шаблон никак не меняется. Конечно, у Вконтакте есть отдельные версии для планшетов и смартфонов, поэтому они решили оставить фиксированный шаблон.

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

И что это значит? А то, что при необходимости блок будет уменьшаться. Если сжать окно, то он тоже уменьшится. В то же время, если разрешение экрана позволяет, ширина будет составлять 1320 пикселей ровно. Уменьшая окно вы не увидите горизонтальный скролл.

Однако тут же можно задать еще и минимальную ширину. Если блоку записать это свойство, то он не будет становиться уже, чем указанное значение. Например:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Если ширина окна станет меньше 600 пикселей, то блок перестанет сжиматься и появиться та самая горизонтальная полоса прокрутки.

Размер в процентах

Задавать величину в процентах становится все более популярным. При грамотном использовании это может принести отличное отображение сайта на разных устройствах.

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

В итоге сайдбар получит 28% ширины родительского элемента (а в нашем случае это общий контейнер), а основной блок – 62%. Их общая ширина составит 90%. Остальные 10 оставим на различные внешние и внутренние отступы, рамки и т.д.

Рис. 2. Резиновые блоки изменяют свои размеры при уменьшении окна в браузере

Как влияют отступы на размеры блоков

Когда вы задаете ширину какому-то блоку с помощью свойства width, это может быть далеко не окончательное значение. Дело в том, что так мы определяем ширину только той части, в которй непосредственно есть содержимое. Нужно помнить, что в css padding увеличивает размер блока, так же, как и рамка (border).

Допустим, возьмем боковую колонку. Мы дали ей 28% от всей ширины контейнера. Но чтобы содержимое в сайдбаре не прилипало к краям, ем нужно дать кое-какие отступы. Также, возможно, вы захотите добавить боковой колонке рамочку.

Вот уже и получается, что общая ширина сайдбара увеличилась на 44 пикселя (отступы справа и слева по 20 и рамка с этих же сторон по 2). Есть вариант для тех, кто не хочет сильно заморачиваться над размерами и записывать их сразу с учетом отступов и рамок. Тогда нужно записать так:

Это замечательное свойство делает так, что в ширину блока (width) начинают включаться внутренние отступы (padding) и рамки. Теперь если вы зададите контенту размер в 62%, он останется таковым в любом случае. А ведь есть еще и внешние отступы, но они уже на размеры блока не влияют. Но если вы захотите сделать, допустим, большой отступ справа от боковой колонки, то контент просто не влезет и вынужден будет перенестись вниз.

Резиновые картинки

Чтобы дать возможность в css картинке меняться по размеру блока, ей нужно задавать ширину в процентах. Таким образом, если сам блок имеет относительный размер или ему прописан max-width, то при уменьшении ширины картинка и блок будут уменьшаться синхронно, что есть хорошо для хорошего отображения сайта.

О резиновой верстке на нашем сайте есть очень подробный видеокурс, из которого вы можете узнать массу полезной информации, а самое главное, получить реальный опыт разработки.

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

Размеры блока

Размеры блока — это комплексная величина и складывается из значений разных свойств. Ниже рассмотрим особенности формирования ширины и высоты блока.

Ширина блока

Ширина блока представляет собой сумму значений следующих свойств:

    — ширина содержимого; и padding-right — поле слева и справа от содержимого;

На рис. 1 схематично изображены свойства, влияющие на ширину блока. При этом какие-то свойства могут отсутствовать и на размер влияние не оказывают.

Ширина блока

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

Обратите внимание, что свойство width задаёт ширину содержимого, а не всего блока целиком. Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений padding , border и margin . Под доступной шириной в данном случае подразумевается ширина содержимого родительского блока, а если родителя нет, то ширина окна браузера.

В примере 1 показано создание блока, занимающего всю доступную ширину. При изменении ширины окна браузера ширина блока будет соответствующим образом подстраиваться.

Пример 1. Ширина блока

Результат данного примера показан на рис. 2.

Блок, занимающий всю ширину

Рис. 2. Блок, занимающий всю ширину

Если свойство width задано, то его значение добавляется к общей ширине блока. В качестве примера рассмотрим следующий стиль.

Ширина блока в данном случае будет равна 442 пикселя; эта величина получается складыванием значения ширины содержимого плюс поле слева, граница слева и отступ слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширину содержимого можно задавать в процентах, но в этом случае общая ширина блока может превысить ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки.

Высота блока

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

    — высота содержимого; и padding-bottom — поле сверху и снизу от содержимого; и border-bottom — толщина границы сверху и снизу; и margin-bottom — отступ сверху и снизу.

Если свойство height не указано, то оно считается как auto , в этом случае высота содержимого вычисляется автоматически. На рис. 3 показаны свойства, влияющие на высоту блока.

Высота блока

Рис. 3. Высота блока

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

1. Если содержимое превышает размер блока при заданном height , то содержимое отображается поверх блока (рис. 4).

Превышение размеров блока

Рис. 4. Превышение размеров блока

Чтобы избежать подобного поведения, свойство height лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется добавить свойство overflow — значение auto устанавливает полосы прокрутки при необходимости (пример 2), а значение hidden скрывает всё, что не помещается в заданные размеры.

Пример 2. Использование overflow

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Высота</title> <style> .block < background: #C5DF94; /* Цвет фона */ height: 50px; /* Высота */ padding: 10px; /* Поля вокруг текста */ overflow: auto; /* Добавляем полосы прокрутки */ ></style> </head> <body> <div <p>Лев ревёт только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царём природы.</p> <p>Охотничий участок льва может иметь длину и ширину до тридцати километров.</p> </div> </body> </html>

Результат данного примера показан на рис. 5. Высота блока задана явно и если содержимое не помещается в блок по высоте, то появляется вертикальная полоса прокрутки.

Полосы прокрутки в блоке

Рис. 5. Полосы прокрутки в блоке

2. Установка значения высоты в процентах обычно не приводит к каким-либо заметным результатам, поскольку высота родителя браузером не вычисляется. Чтобы проценты начали работать, высота родителя должна быть задана явно. В примере 3 показано, как задать высоту блока в процентах.

Пример 3. Высота блока

Результат данного примера показан на рис. 6. Здесь для <div> родителем выступает элемент <body> , поэтому для него устанавливаем значение height равным 100%. В то же время на <body> действуют те же правила, что и на <div> , поэтому для родителя <body> , которым является <html> , также требуется поставить значение height равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты веб-страницы.

Высота блока в процентах

Рис. 6. Высота блока в процентах

Алгоритм блочной модели

Ширина блока формируется из значений width , padding , border и margin . Считать итоговую ширину не всегда удобно, особенно когда в качестве значений встречается комбинация пикселей и процентов. Для изменения алгоритма подсчёта ширины и высоты блока применяется свойство box-sizing со значением border-box . После добавления этого свойства к блоку значение width включает в себя padding и border (но не margin ). Таким образом, свойство width будет задавать ширину всего блока, а не содержимого как раньше. В примере 4 показано изменение вида поля для поиска, чтобы оно занимало всю доступную ширину веб-страницы.

Как установить размер блока css

В современной верстке, на веб-страницах часто можно встретить блоки, которые занимают 100% ширины страницы.

Это выглядит вот так:

Давайте разберемся, каким образом можно добиться такого эффекта.

Для примера, давайте рассмотрим следующую ситуацию.

<div style=&#187;background:#c9c;»> Блок, который должен занимать 100% ширины. </div>

Смотрим на результат, который получился.

В целом хорошо, но по бокам блока видны небольшие отступы, которые портят всю картину. Хотелось бы их убрать.

Первое, что приходит на ум, это присвоить блоку свойство width:100%. Но, это никак не изменит ситуацию. Можете сами в этом убедиться.

<div style=&#187;background:#c9c; width:100%;»> Блок, который должен занимать 100% ширины. </div>

Поэтому свойство width:100% можете смело убирать.

В чем же реальная причина таких отступов?

Дело в том, что блок div, ширину которого мы хотим сделать 100% хранится в двух родительских элементах body и html. По умолчанию, браузеры задают им определенные значения для свойств padding и margin.

Для того, чтобы решить проблему, нужно всего-лишь обнулить эти отступы. Сделать это очень просто:

Смотрим, как выглядит блок теперь.

Все отлично, пространство, которое было по бокам, было убрано.

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

Услуга верстки посадочных страниц.

Высота и ширина элемента

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

В предыдущей статье, мы уже рассмотрели, как можно выполнить верстку для разных браузеров, здесь же речь пойдет о разных экранах и их разрешениях.

Одним из способов &#171;борьбы&#187; с различными разрешениями является использование резиновой верстки. При этом сайт будет растягиваться и сжиматься под разные разрешения, это можно увидеть на сайтах при изменении ширины браузера. На моем сайте напротив, используется статическая верстка.

Чтобы применить верстку для разных экранов, поможет правило стилей @media. Например,

Данная запись говорит о том, что для класса all будет применены отступы в 10px в том случае, когда разрешение экрана будет до 1024px.

Если требуется указать правило для промежуточных экранов, то запись будет следующая:

@media (min-width:1024px;) and (max-width:1640px) <
.all

В этом случае свойства стилей будут применены для экранов, которые используют разрешения от 1024 до 1640px.

В том случае, если для определенного разрешения будет большое количество различных стилей, то рациональнее будет вынести их в отдельный файл. Для этого, при указании пути из основной страницы сайта, нужно выполнить такую запись в пределах <head>:

<link rel=&#8217;stylesheet&#8217; type=&#187;text/css&#187; media='(min-width: 1024px)&#8217; href=&#8217;css/style1024.css&#8217; />

<link rel=&#8217;stylesheet&#8217; type=&#187;text/css&#187; media='(max-width: 1024px) and (min-width: 800px)&#8217; href=&#8217;css/style800.css&#8217; />

Когда нужно указать правила только для мобильных устройств (планшеты, смартфоны), то в данном случае применяется запись max-device-width или min-device-width для обозначения максимального и минимального разрешений соответственно.

Также можно обозначать использование правил только для экранов мониторов, при этом применяется атрибут &#8212; screen. Запись будет иметь вид:

@media screen (max-width:1380px)

Она обозначает, что стили будут применены только к настольным компьютерам, с шириной экрана до 1380px.

Таким же образом, вместо screen, можно указывать handheld (мобильные устройства), print (принтеры), projection (проекторы), tv (телевизоры).

Если Вы хотите уведомлять своих посетителей о последних новинках, сообщать последние новости, то можете заказать рассылку по электронной почте, которая реализовывается с помощью специального сервиса. Он поможет вам без забот вести удобную и качественную рассылку.

width в процентах%

Процент это единица измерения элемента относительно содержащего его блока. Это здорово работает для изображений: здесь мы устанавливаем габариты для изображения, ширина которого всегда равна 50% от ширины контейнера. Попробуйте сузить размер окна браузера, чтобы увидеть что происходит!

<article >

Вы даже можете использовать и что бы ограничить максимальный и минимальный размер картинки!

percent width layout

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

Когда макет слишком узкий, элемент сплющивается. Хуже того, вы не можете использовать для nav чтобы это исправить, потому как данное свойство не удержит от наступления колонку справа.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Высота div равная ширине на CSS

Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

Адаптируем страницу под размер окна браузера

В настоящее врямя существует множество цифровых устройств с различными размерами экранов, от смартфонов до телевизоров с диагональю 42 дюйма и выше. Как полагается, на всех этих устройствах различные разрешения (примерно от 320х240 до 1920х1200) и под каждое из этих разрешений часто бывает необходимо адаптировать веб-страницу. Делается это при помощи media queries &#8212; части спецификации CSS3, позволяющей задать область действия селектора. Media queries представляет собой блок с указанием параметров устройства вывода, такие как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве. Начинается всё с правила @media, следом за которым записываются типы устройств, логические операторы и медиа-функции. В списке ниже отметим все 3 логических оператора.

  1. and &#8212; логическое &#171;И&#187;, применяется для объединения нескольких условий;
  2. not &#8212; логическое &#171;НЕ&#187;, применяется для отрицания какого-либо условия;
  3. , &#8212; логическое &#171;ИЛИ&#187;, если хотя бы одно из условий соблюдается, тогда стиль будет применён.

Теперь рассмотрим медиа-функции. С их помощью задаются технические характеристики устройств (например размер окна браузера). Их 12 штук в настоящее время.

  1. aspect-ratio (min-aspect-ratio, max-aspect-ratio) &#8212; определяет соотношение ширины к высоте отображаемой области. Обозначается 2/3 например, то есть 2 числа, разделённые знаком &#171;/&#187;;
  2. color (min-color, max-color) &#8212; определяет количество бит на один канал цвета. Значение min-color:2 обозначает, что каждый из трёх каналов цветовой системы RGB может отображать 2 2 оттенков и все вместе 4*4*4=64 различных цвета. Если значение не указано вообще, тогда проверяется цветное оно или нет;
  3. color-index (min-color-index, max-color-index) &#8212; определяет количество цветов, которое поддерживает устройство;
  4. device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) &#8212; определяет соотношение сторон экрана устройства (2 числа через слэш, например 4/3);
  5. device-height (min-device-height, max-device-height) &#8212; определяет всю доступную высоту экрана устройства или печатной страницы;
  6. device-width (min-device-width, max-device-width) &#8212; определяет всю доступную ширину экрана устройства или печатной страницы;
  7. grid &#8212; определяет, что это устройство с фиксированным размером символов (терминал или телефон);
  8. height (min-height, max-height) &#8212; задаёт высоту отображаемой области;
  9. monochrome (min-monochrome, max-monochrome) &#8212; определяет, что устройство монохромное, в случае присвоения какого-либо значения, обозначается количество бит на на один пиксель. Например, значение 8 равнозначно 2 8 оттенкам цвета монохромного дисплея;
  10. orientation &#8212; определяет, что устройство находится в альбомном режиме, значение landscape или портретном значение portrait;
  11. resolution (min-resolution, max-resolution) &#8212; определяет разрешение устройства в dpi (точек на дюйм) или dpcm (точек на сантиметр);
  12. scan &#8212; определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, в прогрессивной развёртке кадр передаётся и показывается целиком;
  13. width (min-width, max-width) &#8212; задаёт ширину отображаемой области;

А теперь пример.

Размеры блочных элементов в CSS

Создадим веб-страницу, а стиль для неё зададим при помощи media queries.

Теперь задаём таблицу стилей:

#main <
font-size:14px;
>
@media screen and (max-width:800px) <
#header <
background:#ff6633;
width:100%;
height:10%;
>
#topmenu <
text-align:center;
background-color:#ffcc66;
width:100%;
height:12%;
>
#topmenu a <
color:blue;
text-decoration:none;
>
#topmenu a:hover <
color:blue;
text-decoration:underline;
>
#content <
background-color:#ffccff;
float:left;
width:80%;
height:68%;
>
#sidebar <
float:left;
background-color:#ff9966;
width:20%;
height:68%;
>
#sidebar a <
display:block;
padding-bottom:3px;
color:blue;
text-decoration:none;
>
#sidebar a:hover <
color:blue;
text-decoration:underline;
>
#footer <
clear:both;
background-color:#ffff33;
width:100%;
height:10%;
>
>
@media screen and (min-width:800px) <
#main <
width:800px;
margin:0 auto;
>
#header <
background:#ff6633;
width:800px;
height:100px;
>
#topmenu <
text-align:center;
background-color:#ffcc66;
width:800px;
height:30px;
>
#topmenu a <
color:blue;
text-decoration:none;
>
#topmenu a:hover <
color:blue;
text-decoration:underline;
>
#content <
background-color:#ffccff;
float:left;
width:650px;
height:400px;
>
#sidebar <
float:left;
background-color:#ff9966;
width:150px;
height:400px;
>
#sidebar a <
display:block;
padding-bottom:3px;
color:blue;
text-decoration:none;
>
#sidebar a:hover <
color:blue;
text-decoration:underline;
>
#footer <
clear:both;
background-color:#ffff33;
width:800px;
height:50px;
>
>

Рассмотрим теперь сам код. С html-документом всё понятно, подключаем к нему стиль mediastyle.css. В таблице стилей сначала задаём размер шрифта. Далее говорим, что если ширина экрана (окна браузера) меньше, чем 800 пикселей, тогда для него будут выполняться следующие правила и задаём размеры всех блоков в процентах от ширины окна. Если же ширина экрана больше, чем 800 пикселей, задаём размеры всех блоков в пикселях и устанавливаем местоположение содержимого по центру страницы, при помощи значения свойства margin:0 auto;. Здесь используем для позиционирования плавающие блоки. На этом закончим изучение CSS. Пример созданной нами страницы можно увидеть здесь. Более подробно изучить каскадные таблицы стилей можно при помощи различной литературы и всемирной паутины.

<<Предыдущая | В раздел

Казалось бы что сложного в вёрстке. HTML и CSS даже не языки программирования. HTML страница это просто блоки размещённые в нужном месте. На самом деле всё не так просто. Садиться за вёрстку не разобравшись в нюансах блочной модели значит убить много времени на подгон результатов методом тыка каждый раз удивляясь неожиданным результатам или их отсутствию. В сайтостроении как и в строительстве, если хотите построить что-нибудь посерьёзней забора нужно знать тонкости.

css свойства для определения высоты и ширины блока.

По умолчанию блок в ширину занимает всё доступное ему пространство и ограничивается шириной родительского блока. Высота блока определяется его содержимым.

Размеры блока можно менять использую свойства height и width.

Как задавать в css размер блока

Эти свойства задаются не для всего блока а для его содержимого. Это нужно помнить потому что кроме содержимого на размер блока оказывают влияние ещё два свойства &#8212; border и padding. По названию можно понять что border определяет границу. На картинке граница обозначена красной линией. Пространство между границей и содержимым определяют с помощью свойства padding. Если его не задать то текст на картинке ниже вплотную прижмётся к границе.

Таким образом высчитывая размер блока кроме width и height нужно учитывать padding и border. Для примера посчитаем размер блока для которого заданны следующие значения

  1. div&#123;
  2. border:5pxsolidred;
  3. padding:10px;
  4. width:200px;
  5. &#125;

Ширина блока 200px+10px*2+5px*2=230px

Чтобы не забивать голову арифметикой и всегда точно знать размер блока есть свойство box-sizing. Принимает три значения.

  1. content-box &#8212; Значение заданные в width и height относятся только к содержимому.
  2. padding-box &#8212; Значение заданные в width и height определяют размер содержимого плюс размер отступа(padding).
  3. border-box &#8212; Значение заданные в width и height определяют размер содержимого плюс отступ(padding) плюс граница(border)

Если в пример выше добавить строчку

размер блока будет заявленные 200px, а ширина содержимого уменьшится до 200px-10px*2-5px*2=170px.

margin как правильно задать расстояние между блоками.

Говорить о блоках и не упомянуть о margin будет неправильно тем более рассказать есть что. Для тех кто не в курсе margin определяет свободное пространство вокруг блока. В отличии от padding здесь не всё так очевидно. Рассмотрим два блока один вложен в другой. Задаём вложенному блоку margin: 10%. Сразу возникает вопрос от чего отсчитывать эти проценты. Проценты берутся от ширины родительского элемента. При этом не важно определяем мы горизонтальные или вертикальные отступы. Ответ, прямо скажем, не очевиден, но если посмотреть объяснения становиться ясно отчего выбран именно такой вариант.

Сюрпризы на этом не заканчиваются. margin добавленный к нашей картинке даст такой неожиданный результат.

Серым на картинке обозначен родительский блок. Вопреки нашим ожиданиям margin примененный к дочернему блоку не раздвинул сверху и снизу границы родительского. Произошло это потому что у родительского блока не от чего отталкиваться. В таких случаях margin выносится на ружу и отталкивается от соседнего блока или границ блока расположенного уровнем выше. Чтобы блок отталкивался от родительского нужно чтобы у родительского блока были заданны padding или border или свойство overflow с любым значением кроме visible.

Ещё одна особенность отступов это схлапывание. Смысл в том что если у двух соседних элементов задан margin то расстояние между ними будет равно наибольшему значению.

margin может принимать отрицательные значения. В этом случае один блок будет перекрывать другой. То насколько один блок наползёт на другой определяется

  1. Если оба margin отрицательные то берётся большое по модулю значение
  2. Если один margin отрицательный а другой положительный то они складываются.

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры <div>, <h1>, <p> и др.

Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (<span>, например).

Запрещено добавлять внутрь встроенных элементов блочные (пример 1).

Пример 1. Использование блочных элементов

В данном примере абзац (тег <p>) вставляется внутрь контейнера <div>, а ссылка (тег <a>) &#8212; в заголовок <h2>. Кстати, ошибкой будет поступить наоборот &#8212; добавить <h2> в контейнер <a> (<a href="link1.html"><h2>Ut wisi</h2></a>), поскольку тег <a> не относится к блочным элементам.

Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними.

К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.

Ширина блочных элементов

По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег <div> в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег <div> внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding) и границ (border). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.

Пример 2. Ширина слоя

В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.

Рис 1. Ширина блочного элемента

В том случае когда <!DOCTYPE> в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width.

Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto, это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.

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

Пример 3. Ширина слоя в процентах

Результат примера показан на рис. 2.

Рис. 2. Отображение ширины слоев в браузере

Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег <p>). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется свойство width, поэтому оно определяется по умолчанию &#8212; auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.

Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.

Высота

С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).

Пример 4. Высота слоя

Результат данного примера продемонстрирован на рис. 3.

Рис. 3. Высота блока в разных браузерах

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

Цвет фона

Цвет фона элемента проще всего устанавливать через универсальное свойство background. Фоном при этом заливается область, которая определяется значениями width, height и padding (рис. 4).

Параметры для блоков в CSS

Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox &#8212; снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer &#8212; по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.

а. Internet Explorer 7

б. Firefox, Internet Explorer 8+

Рис. 5. Отображение рамки в браузерах

В примере 5 показано, как создать код для получения подобной границы.

Пример 5. Пунктирная рамка

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

Резюме

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

Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width, но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height, поскольку по умолчанию браузер применяет аргумент auto, который заставляет настраивать размеры элемента автоматически.

Размер div под его содержание

Вот тут задался вопросом. Можно ли div-у задать, что-то типа width:auto, чтобы его ширина автоматически подстраивалась под размер его содержимого.

Или в таких случаях всегда используют табличную верстку?

Ссылка на комментарий
Поделиться на других сайтах

21 ответ на этот вопрос

  • Сортировать по голосам
  • Сортировать по дате

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *