12789

Поля и заполнение

Практическая работа

Информатика, кибернетика и программирование

Поля и заполнение В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним как можно изменять представление элементов свойствами margin и padding. Установим поля элемента Установим заполнение элемента Установим поля элемента У элемента ест

Русский

2013-05-03

13.38 KB

2 чел.

Поля и заполнение

В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов свойствами margin и padding.

  •  Установим поля элемента
  •  Установим заполнение элемента

Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны  до соседних элементов (или краёв документа). См. также диаграмму в 7 лабораторной.

В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента <body>.

CSS-код для этого примера выглядит так:

body {

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

}

Или вы можете написать более элегантно:

body {

margin: 100px 40px 10px 70px;

}

  •  Показать пример

 Задание: вы можете установить поля примерно таким же образом почти для любого элемента. Например, определите поля для всех параграфов <p> следующим образом:

body {

margin: 100px 40px 10px 70px;

}

p {

margin: 5px 50px 5px 50px;

}

Установим заполнение элемента

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

Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон:

h1 {

background: yellow;

}

h2 {

background: orange;

}

  •  Показать пример

 Задание: определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка (сделать самостоятельно и сравнить с предыдущим примером):

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

Резюме

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

К началу


 

А также другие работы, которые могут Вас заинтересовать

66152. Шляхи інформування територіальної громади про діяльність органів місцевого самоврядування та вивчення позиції громадян щодо неї 96 KB
  Зимноводівська сільська рада діє на підставі основного закону Конституції України та Закону України Про місцеве самоврядування. Згідно із ЗУ Про місцеве самоврядування в Україні сільська рада є органом місцевого самоврядування Зимноводівської територіальної громади з власною компетенцією у межах якої діє самостійно.
66155. Проходження практики в Білобожницькій сільській раді Чортківського району Тернопільської області 169.5 KB
  У повній відповідності до вимог Європейської Хартії поряд з такими фундаментальними принципами як народовладдя суверенітет і незалежність України поділу державної влади тощо в окремій статті фіксує принцип визнання та гарантованості місцевого самоврядування.
66156. Економічна оцінка діяльності ТОВ «Бішеп» 2.03 MB
  Предметом діяльності фірми є: виробництво та реалізація товарів народного споживання будівельних матеріалів меблів та їх ремонт; здійснення гуртовороздрібної торгівельної діяльності промисловими продовольчими товарами по договірним цінам організація комісійної торгівлі...