Какое свойство определяет отступ от левого края параграфа

Упражнение 1:

Номер 1

Что определяет строка <p style=”text-transform:uppercase;”> ?

Ответ:

&nbsp(1) тип шрифта&nbsp

&nbsp(2) регистр букв&nbsp

&nbsp(3) кодировку&nbsp

Номер 2

Какими будут буквы после применения <p style=”text-transform:uppercase;”> ?

Ответ:

&nbsp(1) в нижнем индексе&nbsp

&nbsp(2) подчеркнутыми&nbsp

&nbsp(3) заглавными&nbsp

Номер 3

Чтобы все буквы в абзаце были заглавными необходимо применить

Ответ:

&nbsp(1) <p style=”text-transform:uppercase;”> &nbsp

&nbsp(2) <p style=”text-transform:lowercase;”> &nbsp

&nbsp(3) <p style=”text-transform:capitalize;”> &nbsp

Упражнение 2:

Номер 1

Что определяет строка <p style=”text-transform:capitalize;”>?

Ответ:

&nbsp(1) тип шрифта&nbsp

&nbsp(2) регистр букв&nbsp

&nbsp(3) кодировку&nbsp

Номер 2

Что изменится после применения <p style=”text-transform:capitalize;”>?

Ответ:

&nbsp(1) все буквы будут строчными&nbsp

&nbsp(2) все буквы будут заглавными&nbsp

&nbsp(3) все слова будут начинаться с заглавных букв&nbsp

Номер 3

Чтобы все слова в абзаце начинались с заглавной буквы необходимо применить:

Ответ:

&nbsp(1) <p style=”text-transform:capitalize;”>&nbsp

&nbsp(2) <p style=”text-transform:lowercase;”>&nbsp

&nbsp(3) <p style=”text-transform:uppercase;”>&nbsp

Упражнение 3:

Номер 1

Горизонтальный отступ от левого края параграфа определяется свойством

Ответ:

&nbsp(1) text-indent&nbsp

&nbsp(2) text-content&nbsp

&nbsp(3) text-select&nbsp

Номер 2

Какое свойство определяет отступ от левого края параграфа?

Ответ:

&nbsp(1) text-set&nbsp

&nbsp(2) text-indent&nbsp

&nbsp(3) text-trace&nbsp

Номер 3

Что определяется свойством text-indent?

Ответ:

&nbsp(1) отступ от левого края абзаца&nbsp

&nbsp(2) расстояние между буквами&nbsp

&nbsp(3) межстрочное расстояние&nbsp

Упражнение 4:

Номер 1

Для чего используется свойство line-height?

Ответ:

&nbsp(1) для межбуквенного расстояния&nbsp

&nbsp(2) для межстрочного расстояния&nbsp

&nbsp(3) для определения количества символов в табуляции&nbsp

Номер 2

Что определяется с помощью свойства line-height?

Ответ:

&nbsp(1) межстрочное расстояние&nbsp

&nbsp(2) расстояние отступа абзаца&nbsp

&nbsp(3) расстояние между словами&nbsp

Номер 3

Межстрочное расстояние определяется свойством

Ответ:

&nbsp(1) line-height&nbsp

&nbsp(2) line-width&nbsp

&nbsp(3) line-struct&nbsp

Упражнение 5:

Номер 1

Что определяет строка <ul style=”list-style-type:square;”>?

Ответ:

&nbsp(1) изменение маркера списка&nbsp

&nbsp(2) изменение типа шрифта&nbsp

&nbsp(3) изменение расстояния между элементами списка&nbsp

Номер 2

Что определяет строка <ul style=”list-style-type:disk;”>?

Ответ:

&nbsp(1) замещение элементами списка других элементов&nbsp

&nbsp(2) изменение маркера списка&nbsp

&nbsp(3) тип построения и уровни списка&nbsp

Номер 3

Чтобы маркером списка был круг необходимо использовать

Ответ:

&nbsp(1) <ul style=”list-style-type:circle;”>&nbsp

&nbsp(2) <ul style=”list-style-type:disc;”>&nbsp

&nbsp(3) <ul style=”list-style-type:round;”>&nbsp

Упражнение 6:

Номер 1

Укажите доступные значения свойства letter-spacing:

Ответ:

&nbsp(1) {letter-spacing: normal}&nbsp

&nbsp(2) {letter-spacing: none}&nbsp

&nbsp(3) {letter-spacing: auto}&nbsp

Номер 2

Какое свойство позволяет управлять расстоянием между словами?

Ответ:

&nbsp(1) word-spacing&nbsp

&nbsp(2) letter&nbsp

&nbsp(3) letter-spacing&nbsp

Номер 3

С помощью какого свойства можно управлять выравниванием?

Ответ:

&nbsp(1) text-align&nbsp

&nbsp(2) text-indent&nbsp

&nbsp(3) text-shadow&nbsp

Упражнение 7:

Номер 1

В каком правиле все индивидуальные свойства специфицированы?

Ответ:

&nbsp(1) BODY {background: red}&nbsp

&nbsp(2) P {background: url(“chess.png”) gray 50% repeat fixed}&nbsp

&nbsp(3) BODY {background: gray}&nbsp

Номер 3

Из приведенных ниже записей выделите доступное значение свойства widows:

Ответ:

&nbsp(1) inherit&nbsp

&nbsp(2) none&nbsp

&nbsp(3) auto&nbsp

Упражнение 8:

Номер 1

Какой параметр задает высоту элемента?

Ответ:

&nbsp(1) height&nbsp

&nbsp(2) line-height&nbsp

&nbsp(3) max-height&nbsp

Номер 2

Из приведенных ниже записей выберите доступные значения параметра max-height

Ответ:

&nbsp(1) 2.1&nbsp

&nbsp(2) 10pt&nbsp

&nbsp(3) auto&nbsp

Номер 3

К доступным значениям параметра max-width следует отнести

Ответ:

&nbsp(1) 10pt&nbsp

&nbsp(2) auto&nbsp

&nbsp(3) none&nbsp

Упражнение 9:

Номер 1

Какой параметр можно использовать для задания всех характеристик списка в одном объявлении?

Ответ:

&nbsp(1) list&nbsp

&nbsp(2) list-style&nbsp

&nbsp(3) style&nbsp

Номер 2

К доступным значениям параметра list-style относят

Ответ:

&nbsp(1) list-style-type&nbsp

&nbsp(2) list-style-image&nbsp

&nbsp(3) list-style-border&nbsp

Номер 3

Выберите все доступные значения параметра list-style:

Ответ:

&nbsp(1) list-style-position&nbsp

&nbsp(2) list-style-type&nbsp

&nbsp(3) list-margin&nbsp

Упражнение 10:

Номер 1

Какой параметр задает изображение в качестве маркера элемента списка?

Ответ:

&nbsp(1) list-style-image&nbsp

&nbsp(2) list-style-glyph&nbsp

&nbsp(3) list-style-icon&nbsp

Номер 2

Какой параметр задает размещение маркера элемента списка?

Ответ:

&nbsp(1) list-style-position&nbsp

&nbsp(2) list-style-pos&nbsp

&nbsp(3) list-position&nbsp

Номер 3

Из приведенных ниже записей выберите доступные значения параметра list-style-position:

Ответ:

&nbsp(1) default&nbsp

&nbsp(2) inside&nbsp

&nbsp(3) left&nbsp

Упражнение 11:

Номер 1

Какой параметр задает тип выводимого курсора?

Ответ:

&nbsp(1) display&nbsp

&nbsp(2) setcursor&nbsp

&nbsp(3) cursor&nbsp

Номер 2

Определите из приведенных ниже записей доступные значения параметра cursor:

Ответ:

&nbsp(1) default&nbsp

&nbsp(2) text&nbsp

&nbsp(3) stop&nbsp

Номер 3

Как установить курсор в виде песочных часов?

Ответ:

&nbsp(1) clock&nbsp

&nbsp(2) wait&nbsp

&nbsp(3) time&nbsp

Упражнение 12:

Номер 1

Какой параметр позволяет задать способ визуализации элемента?

Ответ:

&nbsp(1) monitor&nbsp

&nbsp(2) show&nbsp

&nbsp(3) display&nbsp

Номер 2

Каковы допустимые значения параметра display?

Ответ:

&nbsp(1) block&nbsp

&nbsp(2) table&nbsp

&nbsp(3) off&nbsp

Номер 3

С помощью какого параметра можно задать вывод элемента в виде списка?

Ответ:

&nbsp(1) list&nbsp

&nbsp(2) list-item&nbsp

&nbsp(3) listing&nbsp

В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. В боксовой модели (box model) поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.

В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.

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

Это блок новостей news. Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title, news__list и news__more-link.

<div class=”news”>
<h2 class=”news__title”>Новости</h2>
<ul class=”news__list”>
<li class=”news__list-item”>…</li>
<li class=”news__list-item”>…</li>
<li class=”news__list-item”>…</li>
</ul>
<p class=”news__more-link”><a href=”…”>Другие новости</a></p>
</div>

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

.news {
padding: 20px 25px;
}

Таким образом, при необходимости изменить значение полей справа и слева это нужно будет сделать в одном месте. А при добавлении нового элемента внутрь блока новостей, он уже будет иметь нужные отступы слева и справа.

Часто бывает так, что все элементы внутри блока имеют одинаковые отступы слева и справа, кроме одного, который вообще не должен иметь отступов, например, из-за фона. В этом случае для элемента можно задать отрицательные отступы. Тогда не придется убирать поля внутри блока для остальных элементов.

Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным. Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.

Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.

.news__title {
margin-bottom: 10px;
}

.news__more-link {
margin-top: 12px;
}

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

.news__list {
margin: 10px 0 12px 0;
}

Но в этом случае при убирании ссылки «Другие новости» внизу остается лишний отступ. То же самое справедливо и для заголовка. Очевидно, что первый вариант является более правильным, поскольку позволяет гибко изменять внешний вид блока.

Теперь нужно задать отступы между отдельными новостями. Опять же, нужно принять во внимание, что количество новостей может меняться, и в списке может быть только одна новость.

Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор :first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора :last-child, который был добавлен только в спецификации CSS версии 3.0.

.news__list-item {
margin-top: 18px;
}

.news__list-item:first-child {
margin-top: 0;
}

Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное — определить, какие элементы блока являются основными (обязательными), а какие опциональными.

Иногда мы не можем опираться на обязательные элементы. Например, у нас есть всплывающее окошко popup, внутри которого может выводиться какой-то заголовок и текст. Причем в каких-то случаях может не быть текста, а в каких-то и заголовка. То есть оба элемента являются опциональными.

В этом случае можно использовать следующий способ задания отступов.

.popup__header + .popup__text {
margin-top: 15px;
}

jsfiddle.net/onfv42mz/1

Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.

Схлопывание вертикальных отступов

Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ — это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px, а другому отступ сверху в 20px, отступ между ними будет не 50px, а 30px.

.block1 {
margin-bottom: 30px;
}

.block2 {
margin-top: 20px;
}

jsfiddle.net/j99btnc8

То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».

Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.

Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px, а для заголовка второго уровня отступ сверху 20px и снизу 10px, а для всех параграфов зададим отступ сверху 10px.

h1 {
margin-bottom: 24px;
}

h2 {
margin-top: 24px;
margin-bottom: 12px;
}

p {
margin-top: 12px;
}

jsfiddle.net/n27fms7s/1

Теперь заголовок h2 можно расположить как после заголовка h1, так и после параграфа. В любом случае отступ сверху не будет превышать 24px.

Общие правила

Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.

1. Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
2. При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
3. Для списка однотипных элементов — не забывать о том, что число элементов может варьироваться.
4. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.