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

К началу


 

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

18789. Структурная организация, классификация, функциональные задачи, информационная модель 119.07 KB
  Структурная организация классификация функциональные задачи информационная модель. ЭМС ЛСУ определяет весь спектр задач которые д. решать система управления в общем. В результате изучения ЛСУ необходимо знать: 1. ...
18790. Особенности реализации вычислительных процедур в цифровых ЛСУ. Табличные методы обработки информации 103.02 KB
  Особенности реализации вычислительных процедур в цифровых ЛСУ. Табличные методы обработки информации. Основные задачи вычислительного характера возлагаемые на МПС: 1. Траекторные расчеты 2. Математические вычисления 3. ...
18791. Оценка точности реализации алгоритмов обработки информации в ЛСУ 112.13 KB
  Оценка точности реализации алгоритмов обработки информации в ЛСУ. Для анализа точности используется 2 подхода: апостериорый экспериментальный и априорный аналитический. Оценка точности реализации табличноалгоритмического метода вычислений определяется в данн. сл
18792. Системы сбора и первичной обработки информации в ЛСУ. Определение истинных значений параметров объекта по показаниям датчиков 53.97 KB
  Системы сбора и первичной обработки информации в ЛСУ. Определение истинных значений параметров объекта по показаниям датчиков. Основные характеристики потока информации: 1. Объект управления как источник информации; 2. Назначение процесса информирования; 3. Структура с
18793. Исследование распределения температуры и влажности воздуха в помещении учебной аудитории №408 235.5 KB
  Изучение характера распределения температуры и относительной влажности воздуха по объёму помещения; Получение практических навыков по измерению температуры и влажности в помещении с помощью измерителя влажности и температуры «ТКА-ТВ»
18794. Типовые непрерывные законы управления. Устойчивость промышленных систем управления с непрерывными регуляторами 431.53 KB
  Типовые непрерывные законы управления. Устойчивость промышленных систем управления с непрерывными регуляторами. Законы регулирования Динамические характеристики ОУ обычно м.б. аппроксимированы некоторыми типовыми зависимостями. Это позволяет всё возможное разноо...
18795. Реализация типовых законов управления в цифровых ЛСУ. Адекватность моделей непрерывных и цифровых регуляторов 270.53 KB
  Реализация типовых законов управления в цифровых ЛСУ. Адекватность моделей непрерывных и цифровых регуляторов. ИЭ1 импульсный элемент входного коммутатора который преобразует непрерывный сигнал в последовательность импульсов КЭ кодирующий элемент который о...
18796. Принципы построения и основные структуры реальных промышленных регуляторов 489.21 KB
  Принципы построения и основные структуры реальных промышленных регуляторов. Рассмотрим общий принцип построения желаемой структуры автоматических регуляторов. При охвате какоголибо участка схемы с передаточной функцией отрицательной обратной связью получаем эк...
18797. Модули УСО и удаленного ввода - вывода 68.12 KB
  Модули УСО и удаленного ввода вывода. Неотъемлемой частью любой АСУТП являются устройства связи с объектом УСО назначение которых заключается в сопряжении датчиков аппаратуры и исполнительных механизмов контролируемого объекта и/или технологического процесса с вы...