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

К началу


 

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

31312. Экспериментальная работа по ознакомлению детей старшего дошкольного возраста с Олимпийскими играми 281 KB
  Теоретические основы формирования представлений у детей старшего дошкольного возраста об Олимпийских играх. Научные основы развития детей старшего дошкольного возраста посредством олимпийского образования. Специфика формирования представлений детей старшего дошкольного возраста об Олимпийских играх 22 Выводы 31 II. Экспериментальная работа по ознакомлению детей старшего дошкольного возраста с Олимпийскими играми 2.
31313. Строительство электрической сети и расчет капитальных вложений 5.39 MB
  Без учета влияния cosφ определим по формуле: β стоимость потерянного кВтч равная 105 руб. кВтч или 1050 руб. На распределительном силовом щите РСЩ отключить рубильник блока профилактируемой камеры. На рукоятке рубильника повесить плакат Не включать Работают люди.
31314. Особенности обращения взыскания на заработок и иные доходы должника-гражданина 325 KB
  Целью дипломного исследования является комплексное рассмотрение теоретических и практических проблем, формулирование предложений по совершенствованию законодательства, касающегося вопросов обращения взыскания на заработок и иные доходы должника - гражданина, и практики его применения.
31316. СУЧАСНИЙ СТАН УПРАВЛІННЯ МАТЕРІАЛЬНИМИ РЕСУРСАМИ НА ПІДПРИЄМСТВІ на прикладі КП «Березанського ККП» 819.5 KB
  ТЕОРЕТИЧНІ ОСНОВИ УПРАВЛІННЯ МАТЕРІАЛЬНИМИ РЕСУРСАМИ НА ПІДПРИЄМСТВІ Характеристика матеріальних ресурсів підприємства. Аналіз виробничо економічних показників підприємства. Аналіз фінансового стану підприємства 2. Зростання потреби підприємства в матеріальних ресурсах може бути задоволений екстенсивним шляхом придбанням або виготовленням більшої кількості матеріалів та енергії або інтенсивним більш економним використанням наявних запасів в процесі виробництва продукції.
31317. Анализ существующего состояния транспортного рынка Республики Беларусь и описание механизма функционирования транспортно-логистического центра на основе накопленного опыта зарубежных стран, включая Россию 2.45 MB
  Организация транспортно-экспедиционного обслуживания грузовладельцев при существующей технологии выполнения услуг Анализ схем доставки грузов Зарубежный опыт организации транспортно-логистических систем. Возникает необходимость формирования нового мировоззрения прежде всего в сфере взаимодействия с грузовладельцами замены системы и методов управления развития информационной базы.
31319. Проектирование специализированного завода по производству железобетонных цельных предварительно напряженных свай сплошного сечения с поперечным армированием ствола типа С80.35AIV по агрегатно-поточной технологии 1.44 MB
  Производство бетона по своему технологическому содержанию — это химическое производство, так как твердение бетона осуществляется через протекание сложных химических реакций, поэтому прочность затвердевшего бетона существенно зависит от качества использованных для его приготовления исходных материалов.
31320. Влияния поточно-цеховой системы содержания на физиологическое состояние и продуктивность животных в условиях ОАО «Племзавод Октябрьский» Ферзиковского района Калужской области 291.5 KB
  Скотоводство является основным поставщиком высококачественного кожевенного сырья, получаемого при убое скота (впрочем, и в подсобном хозяйстве из выделанных телячьих шкур нередко шьют зимнюю одежду, чехлы для сидений автомобиля и другие изделия) и побочных продуктов (кости, рога, волос и др.), источником получения ценного органического удобрения (от каждой коровы за год получают более 10 тонн навоза).