logo_s

САМОУЧКА

Сайт для тех, кто хочет научиться

 

 

 

 

 

 

Главная

О Нас

Публикации

Связь

 

 

 

 

 

 

 

Наши публикации

 

HTML для новичков

 

XHTML

 

CSS для новичков

 

CSS 3

 

JavaScript

 

< Предыдущая  Следующая >

С помощью CSS свойств padding и margin Вы сможете управлять внутренним и внешним отступом у элементов.

 

CSS Padding

В CSS существует два вида отступов: внутренние и внешние.

Внутренний отступ - это расстояние между содержимым элемента и его границей. Внешний отступ - это расстояние отступаемое с внешней стороны границы элемента.

Величина отступов может определяться в пикселях (px), сантиметрах (cm), процентах (%), em.

CSS свойство padding позволяет установить величину внутреннего отступа.

Пример

.pad1
{
border-style:solid;
padding:20px;
}
.pad2
{
border-style:solid;
padding:10px;
}
.pad3
{
border-style:solid;
padding:5px;
}

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

CSS блоковая модель

Пример

/* Отступ от содержимого элемента до его верхней границы равен 30, до левой 20, до
нижней 10 и до правой 40 пикс. */
.pad1
{
padding-top:30px;
padding-left:20px;
padding-bottom:10px;
padding-right:40px;
}

CSS Margin

С помощью CSS свойства margin Вы можете задать величину внешнего отступа.

Пример

.mar1
{
margin:25px;
}
.mar2
{
margin:10px;
}
.mar3
{
margin:5px;
}

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

CSS блоковая модель

Пример

/* Отступ с верхней стороны элемента равен 20, снизу 40, слева 70, а справа
10 пикселям */
.mar1
{
margin-top:20px;
margin-bottom:40px;
margin-left:70px;
margin-right:10px;
}

Краткая форма записи

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

Пример

/* Отступ от содержимого до границы элемента сверху будет равен 60, справа 20,
снизу 40, а слева 50 пикселям */
.pad1
{
border:2px solid;
padding:60px 20px 40px 50px;
}
/* Отступ от содержимого до границы элемента сверху будет равен 40, слева и
справа 30, а снизу 10 */
.pad2
{
border:2px solid;
padding:40px 30px 10px;
}
/* Отступ от содержимого до границы элемента сверху и снизу будет равен 40,
а слева и справа 30 */
.pad3
{
border:2px solid;
padding:40px 30px;
}

Краткая форма записи может также использоваться с внешними отступами:

Пример

/* Внешний отступ сверху элемента будет равен 50, справа 20, снизу 40 и слева 50
пикселям */
.mar1
{
margin:50px 20px 40px 50px;
}
/* Внешний отступ сверху элемента будет равен 30, слева и справа 40, а снизу 50
пикселям */
.mar2
{
margin:30px 40px 50px;
}
/* Внешний отступ сверху и снизу элемента будет равен 30, а слева и справа 50
пикселям */
.mar3
{
margin:30px 50px;
}

Сделайте сами

Задание 1 передвиньте геометрические фигуры в соответствующие им рамки с помощью свойства padding.

Пример

<img id='geom1' src='gimg.gif'  />
<img id='geom2' src='gimg2.gif' />
<img id='geom3' src='gimg3.gif' />
<img id='geom4' src='gimg4.gif' />

Задание 2 переместите геометрические фигуры в соответствующие им ячейки с помощью свойства margin.

Пример

<img id='geom1' src='gimg.gif' />
<img id='geom2' src='gimg2.gif' />
<img id='geom3' src='gimg3.gif' />
<img id='geom4' src='gimg4.gif' />


< Предыдущая  Следующая >

 

 

 

 

 

 

Последние добавления

 

HotLog