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. В следующем уроке мы рассмотрим, как устанавливать рамки разного цвета и как очерчивать элементы.

К началу


 

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

7204. Numbers. Percent. Telephone and fqx number 80.5 KB
  Тема:Numbers. Percent. Telephone and fqx number. Вид заняття: лекція-семінар. Мета: спонукати студентів до висловлювання англ. мовою шляхом постановки проблемних питань, практикувати навички усного мовлення розвивати у студе...
7205. Marketing. Лекція-семінар 74.5 KB
  Тема:Marketing Вид заняття: лекція-семінар. Мета: спонукати студентів до висловлювання англ. мовою шляхом постановки проблемних питань, практикувати навички усного мовлення розвивати у студентів навички самостійної роботи. Обладна...
7206. Radio commercials 62.5 KB
  Тема: Radio commercials Вид заняття: самостійна робота. Мета: розвивати самостійність студентів, розвивати вміння і навички роботи з додатковою літературою, оволодівати методами добору матеріалу, вчитися виділяти головне. Література: Л-2...
7207. Financial institutions 65.5 KB
  Тема: Financial institutions Вид заняття: лекція-семінар. Мета: спонукати студентів до висловлювання англ. мовою шляхом постановки проблемних питань, практикувати навички усного мовлення розвивати у студентів навички самостійної р...
7208. The role of the government 36 KB
  Тема: The role of the government Вид заняття: самостійна робота. Мета: розвивати самостійність студентів, розвивати вміння і навички роботи з додатковою літературою, оволодівати методами добору матеріалу, вчитися виділяти головне. Літера...
7209. Sources of finance 54.5 KB
  Тема: Sources of finance Вид заняття: лекція-семінар. Мета: спонукати студентів до висловлювання англ. мовою шляхом постановки проблемних питань, практикувати навички усного мовлення розвивати у студентів навички самостійної робот...
7210. Insuranse services of banks 45.5 KB
  Тема: Insuranse services of banks Вид заняття: лекція-cемінар Мета: спонукати студентів до висловлювання англ. мовою шляхом постановки проблемних питань, практикувати навички усного мовлення розвивати у студентів навички самостійн...
7211. Telephone Etiquette 31.5 KB
  Тема: TelephoneEtiquette Вид заняття: самостійна робота. Мета: розвивати самостійність студентів, розвивати вміння і навички роботи з додатковою літературою, оволодівати методами добору матеріалу, вчитися виділяти головне. Літерату...
7212. Классификация субъектов предпринимательской деятельности и организационно- правовые формы. Юридические лица 35.22 KB
  Классификация субъектов предпринимательской деятельности и организационно-правовые формы. Юридические лица. Понятие, признаки, общая и специальная правоспособность юридического лица. Государственная регистрация и учредительные документы юридич...