Добрый день всем на wmbn.ru! Продолжаем рубрику Уроки CSS и HTML, и сегодняшняя запись будет посвящена созданием отступов и заданием границ для объектов с помощью CSS. Я уже писал о том, как создать свой блок и присвоить ему отдельный стиль, а также о том, как задать фон данному объекту.

Задание свойст для объекта margin, padding и border

Иногда, бывает так, что созданный блок съезжает то влево, то вправо, относительно неказисто смотрится на фоне общего документа (выравнивание, текст наезжает на границы и прочее), и чтобы это исправить в CSS созданы специальные операторы (параметры, свойства) padding и margin, которые позволяют сделать отступ как от основного документа, так и внутри блока.

Padding — задание отступов от границ блока в Css

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

Свойство padding для задания отступа

Свойство padding в самом простом варианте имеет вид:

padding: 1px;

Данным способом задаются отступы контента от каждой границы на 1 пиксель. Следующий код делает отступы от каждых полей с разными значениями:

padding:1px 2px 3px 4px;

В данном случае от верхнего участка задается отступ в 1 пиксель, правой 2 пикселя, нижней — 3 и левой — 4. Следующий вид немного упрощен, но так же позволяет более подробно настроить вид блока:

padding:1px 2px 3px;

При использовании такого способа задания отступов отдельно настраиваются отступы от верхнего поля в 1 пиксель, правого и левого одновременно на 2 пикселя, и нижнего поля на 3. И последний вариант упрощенного использования padding:

padding:1px 2px;

Отступы по вертикали и горизонтали на 1 и 2 пикселя соответственно. Также можно задать для каждого поля отдельный отступ, прописав его в CSS:

padding-bottom: 1px;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;

Как видно, для каждого отступа от определенной части поля прописывается отдельный код. Для верхней top, нижней — bottom, для полей слева и справа — left и right. Удобно, когда контент блока содержит одновременно текст и картинку.

Margin — задание внешних отступов для блока в Css

Свойство margin является противоположностью padding и имеет возможность задавать значения отрицательным числом, то есть с помощью данного свойства можно задать положение для отдельного блока на странице.

Свойство margin для объектов

Он также задается с помощью CSS и имеет несколько видов:

margin: 10px;
margin: 10px 10px;
margin: 10px 10px 10px;
margin: 10px 10px 10px 10px;

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

margin-bottom: -4px;
margin-top: -4px;
margin-left: -4px;
margin-right: -4px;

Вроде бы все просто, но могут возникнуть различные проблемы, касаемо структуры сайта — блоки будут разъезжаться в разные места или накладываться друг на друга, старые версии браузеров (особенно Internet Explorer) не всегда правильно понимают свойство margin и задают непонятные отступы, возможны различные конфликты с блоками, содержащими в себе внутренние отступы padding. Решить данную проблему можно прописав как положительные, так и отрицательные значения для свойства margin, что в некоторых случаях помогает избежать различных неурядиц.

Создание границы для блока — Css свойство border

Приступим к одному из емких элементов CSS кода — border(граница), которая включает в себя большое количество параметров — от простого задания цвета, до редактирования отдельного участка каждой из частей бордюра. Граница нужна в том случае, когда необходимо выделить отдельный участок документа, блок или другой элемент среди основного документа.

Создание границы - border для объектов

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

border-color: black;

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

border-color: 2px black;

Следующий вариант — сделаем стилизацию краев с использованием нескольких свойств (dotted, dashed, double, groove и ridge). На примере сделаем блок с границей в виде хребта, с шириной 2 пикселя и черным цветом:

border: 2px ridge black;

Теперь приступим к заданию определенных свойств для каждой части рамки. Всего можно редактировать 4 части — top, bottom, left, right (верхняя часть границы, нижняя, левая и правая). То есть если требуется задать для левой границы одни параметры, а для трех остальных другие, но тоже разные, нужно для каждого объекта прописать следующее:

border-top: 2px red;
border-bottom: 2px green;
border-left: 3px double blue;
border-rigth: 4px groove black;

Используется данный вариант не часто — обычно для всех 4 участков задается один стиль. Теперь сделаем так, чтобы использовать изображение в качестве текстуры для границы. Для этого нужно прописать для границы свойство image, т.е.:

border-image: url(/zoonews/code/kak-zadat-vnutrennie-i-vneshnie-otstupy-paddin-margin-border/images/1.png);

Изображение (указано в части url(/zoonews/code/kak-zadat-vnutrennie-i-vneshnie-otstupy-paddin-margin-border/images/1.png) — путь для изображения) будет просто наложено на границу. Чтобы создать для него выравнивание, используйте для него параметры repeat (повторяет изображение в случае, если оно имеет низкое разрешение) и round (повторяет изображение таким образом, что оно не делится на части). Но тут опять же следует учесть, что каждый браузер по своему воспринимает данный код, поэтому для каждого потребуется прописать отдельные части кода:

-moz-border-image: url(/zoonews/code/kak-zadat-vnutrennie-i-vneshnie-otstupy-paddin-margin-border/images/1.png);
-webkit-border-image: url(/zoonews/code/kak-zadat-vnutrennie-i-vneshnie-otstupy-paddin-margin-border/images/1.png);
-o-border-image: url(/zoonews/code/kak-zadat-vnutrennie-i-vneshnie-otstupy-paddin-margin-border/images/1.png);

Moz указывает, что код будет использоваться браузерами Mozilla Firefox, webkit — для браузеров Google Chrome, Midory и o — для браузера Opera. И последнее — зададим для границы скругленные края. Делается это с помощью свойства radius:

border-radius: 4px;

Тут также стоит учитывать то, что данный код будет корректно отображаться только в современных браузерах, поддерживающие CSS 3, остальные просто оставят острые края.
На этом я закончу, постепенно наполняется рубрика Уроки HTML, CSS, Div и это радует. Создавайте свои стили, делайте свой шаблон отличным от других — пусть даже он и скаченный, но небольшой редизайн ему не помешает.

Комментариев: 6

  1. writer

    West Blogger 123rf — там таких много, осталось лишь, как ты сказал, оригинально сделать

  2. writer

    Виталий Да, полезности в нем много, жаль что пока не дошло до кроссбраузерности (только создание отдельных строк кода)

  3. Сергей

    Я тоже только вот овладеваю CSS, по мне очень удобно, да и понять не очень и сложно!

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>