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

К началу


 

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

1472. СТРУКТУРА И СЕМАНТИКА ДЕТЕКТИВНОГО НАРРАТИВА (на материале текстов английских и русских рассказов) 331.07 KB
  Целью диссертационной работы является сопоставительный анализ когнитивных механизмов структуры и семантики детективного нарратива на материале английского и русского языков.
1473. Win API 32. Программирование на C 337.13 KB
  Литература по API Windows. Краткая история Windows. Цикл обработки сообщений Windows. Стили окна, overlapped window, pop-up window. Структура сообщения MSG. Окно сгенерированного приложения.
1474. ЭМОЦИОНАЛЬНЫЙ КОНЦЕПТ ЛЮБОВЬ В ИДИОСТИЛЕ А.С. ПУШКИНА 332.86 KB
  Ррассмотрение понятий концепт, концептуальная картина мира, представление методологических основ исследования концепта, определение понятия идиостиля, а также особенностей и возможностей поэтического перевода.
1475. ЛИНГВОКОГНИТИВНЫЙ И ПРАГМАТИЧЕСКИЙ УРОВНИ ЯЗЫКОВОЙ ЛИЧНОСТИ А.П. СТЕПАНОВА 334.33 KB
  Цель работы – определить особенности лингвокогнитивного и прагматического уровней структуры языковой личности первого енисейского губернатора А.П. Степанова, установить его ключевые (эстетические, утилитарные и художественные) ценности.
1476. КОНЦЕПТУАЛЬНЫЕ ИНВЕРСИИ: КОНЦЕПТ ЧУДО (НА МАТЕРИАЛЕ РУССКИХ И ИРЛАНДСКИХ ПОСЛОВИЦ, ПОГОВОРОК И СКАЗОК) 338.84 KB
  Целью данной работы является выявление лингвистических, хронотопических и нарративных особенностей выражения концепта чудо/miracle в текстах русского и ирландского фольклора, а также проверка гипотезы концептуальных инверсий применительно к данному концепту.
1477. НОМИНАТИВНЫЙ ПОТЕНЦИАЛ ГЛАГОЛЬНО-ИМЕННЫХ СЛОВОСОЧЕТАНИЙ ТИПА И TO GIVE A SMILE 339 KB
  Описать номинативный механизм ГИС с точки зрения когнитивного подхода в теории номинации и сопоставить русские и английские ГИС по характеру передаваемой ими когнитивной информации, исследовать и сопоставить когнитивно-коммуникативные свойства русских и английских ГИС в области семантического (И.И. Ковтунова, К.Г. Крушельницкая, В. Матезиус, Н.А. Слюсарева и др.) и актуального синтаксиса (Ч. Филлмор, У. Чейф, Р.О. Якобсон и др.)
1478. СОПОСТАВИТЕЛЬНЫЙ КОГНИТИВНЫЙ И ЛИНГВОКУЛЬТУРОЛОГИЧЕСКИЙ АНАЛИЗ РУССКИХ, БОЛГАРСКИХ И АНГЛИЙСКИХ АНЕКДОТОВ 339.73 KB
  Рассмотрение таких понятий как юмор, картина мира, стереотип, установка, ментальность, а также изучить понятие анекдот, проблему его определения отечественными и зарубежными исследователями, рассмотреть различные теории юмора, выработать исходные позиции.
1479. Мостовые устройства СВЧ 357.77 KB
  Проектирование делителя (сумматора) мощности пополам (моста Уилкинсона) на микрополосковых ЛП. Проектирование делителя (сумматора) мощности пополам (моста Уилкинсона) на основе сосредоточенных реактивных элементов. Расчет МУ на сосредоточенных элементах.
1480. Проектирование металлических конструкций при строительстве здания 355.91 KB
  Расчет прокатных балок. Расчетная толщина сварочного углового шва. Расчетная нагрузка на вспомогательную балку. Требуемая площадь поясных горизонтальных листов. Расчет монтажного стыка сварной балки. Стык на высокопрочных болтах.