Какого понятия не существует нижнего отступа
Перейти к содержимому

Какого понятия не существует нижнего отступа

  • автор:

Форматирование текста по ГОСТ

Итак, мы разобрались с тем, как же избежать ужасного оформления работы. Поговорим о том, как сделать его нормальным.

Нормальным оформлением мы будем считать оформление курсовой работы по ГОСТ 7.32-2001. Идеальное оформление — это оформление, выполненное строго в соответствии с конкретной методичкой. Но, если никаких особых требований в вузе не предъявляли, то можно сделать по ГОСТ, и быть уверенным, что это — правильно.

Основные правила оформления

Полный текст документа занимает больше 30 страниц, поэтому разобраться в нём, будучи ещё неопытным, достаточно сложно. Основное, что тебе нужно запомнить :

  • Текст набирается исключительно шрифтом Times New Roman. Это касается и основного текста курсовой, и сносок, и титульного листа.
  • Стандартный размер шрифта основного текста — 14 пт. Для сносок используется либо 12 пт, либо 10 пт. Лучше остановиться на 10 пт. Если источников будет много, то более крупные сноски будут занимать до трети страницы.
  • Межстрочный интервал — полуторный. Только так, и никак иначе.
  • Размер полей: правое не менее 10 мм, верхнее и нижнее — не менее 20 мм, левое — не менее 30 мм. Этим требованиям соответствует стандартный размер полей в Word, можно ничего не менять.
  • Абзацный отступ — 1,5. Это стандартное значение, и его можно не менять.
  • Номер страницы ставится внизу по центру. Нумерация — сквозная. При этом, хоть и на титульном листе номер не ставится, в общий объём работы он входит. А вот приложения — нет.

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

Расставь акценты

Главное — не переборщить

Отсутствие акцентов сделает даже аккуратно оформленный текст скучным и монотонным, к тому же, в такой работе сложно ориентироваться. Самое главное — необходимо выделять названия глав и параграфов. При этом, названия глав должны выделяться наиболее ярко. Как можно делать :

  • набирать названия глав КАПСОМ, использовать жирный шрифт
  • набирать названия глав 16 пт, использовать жирный шрифт
  • набирать названия параграфов жирным шрифтом
  • использовать для названий глав и параграфов форматирование «по центру»

Кроме глав и параграфов, необходимо выделять некоторые ключевые моменты в самом тексте работы. Для акцентов в тексте можно использовать или жирный шрифт, или курсив. Но только что-то одно: жирный курсив — это уже перебор. На чём акцентировать внимание :

  1. ключевые термины
  2. ключевые слова и фразы в маркированных и нумерованных списках
  3. важные данные в таблицах

Тут необходимо небольшое уточнение.

Списки в тексте курсовой работы

Существует два типа списков — маркированные и нумерованные. В текстах этого курса маркированные списки — это списки с галочками. Списки с цифрами называются нумерованными. Как выбрать какой тип списка использовать :

  1. Маркированные списки используются в том случае, если не важно количество пунктов или их очерёдность. Допустим, тебе нужно просто перечислить несколько альтернативных определений одного понятия.
  2. Нумерованные списки нужно использовать в том случае, если очень важна количественная оценка. Например, ты не просто перечисляешь определения, а указываешь, что существуют три подхода — тогда нужно обозначить каждый своей цифрой. Нумерованные списки можно использовать, если перечисляешь названия отделов организации или составляющие механизма, это позволит показать размер описываемой системы.

Не стоит делать список слишком длинным. Если описания внутри списка получаются слишком объёмными, и его размер начинает превышать одну страницу, то стоит оставить в списке только тезисы, а весь остальной текст вынести. Можно поступить наоборот: список — это отличный инструмент для подведения итогов , он может стать кратким итоговым резюме.

Поля и отступы CSS: отличия свойств margin и padding

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

padding и margin

Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.

Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:

Отступы:

  • padding-top: значение;
  • padding-right: значение;
  • padding-bottom: значение;
  • padding-left: значение;

Поля:

  • margin-top: значение;
  • margin-right: значение;
  • margin-bottom: значение;
  • margin-left: значение;

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .

Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

    4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:

padding: 2px 4px 5px 10px;
padding: 3px 6px 9px;
padding: 6px 12px;
padding: 3px;

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px ), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

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

Схлопывание полей margin в CSS

Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:

  • Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
  • Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
    20 + (-18) = 20 — 18 = 2 пикселя.
  • Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 8 , то есть, -6 > -8 . Итоговый размер поля равен -8 пикселей.
  • В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
  • Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

margin

CSS свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top , margin-right , margin-bottom и margin-left .

Интерактивный пример

Составные свойства

Данное свойство является сокращением для следующих CSS свойств:

Синтаксис

/* Применяется ко всем четырём сторонам */ margin: 1em; margin: -3px; /* по вертикали | по горизонтали */ margin: 5% auto; /* сверху | горизонтально | снизу */ margin: 1em auto 2em; /* сверху | справа | снизу | слева */ margin: 2px 1em 0 auto; /* Глобальные значения */ margin: inherit; margin: initial; margin: unset; 

Свойство margin может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип , или является ключевым словом auto . Каждое значение может быть положительным, отрицательным или равным нулю.

  • Когда определено одно значение, такое значение определено для всех четырёх сторон.
  • Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
  • Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
  • Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).

Значения

Размер отступа как фиксированное значение.

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

Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.

Формальное определение

  • margin-bottom : 0
  • margin-left : 0
  • margin-right : 0
  • margin-top : 0
  • margin-bottom : процент, как указан, или абсолютная длина
  • margin-left : процент, как указан, или абсолютная длина
  • margin-right : процент, как указан, или абсолютная длина
  • margin-top : процент, как указан, или абсолютная длина

Отступы в CSS (margin и padding)

В этой статье пойдёт речь о двух CSS свойствах: margin и padding. Оба они задают отступ. Но в одном случае это внешний отступ от других элементов, а во втором — внутренний отступ от содержимого. Эти свойства являются одними из наиболее часто используемых при создании сайтов. Разберём каждое по отдельности.

Внешний отступ (margin)

Для демонстрации отступа нам потребуется два блока div. Создадим их:

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

Как видно из примера, рамки совпадают, потому что нет отступов. Теперь сделаем внешний отступ в 10px для внутреннего, красного, элемента так:

На странице браузера получится такой результат:

  • margin-left — отступ слева
  • margin-right — отступ справа
  • margin-top — отступ сверху
  • margin-bottom — отступ снизу

Получится такой результат:

Как и с другими универсальными свойствами, которым можно передавать сразу 4 значения для 4 сторон (или углов), свойству margin можно передать 2 значения. К примеру так: «margin: 10px 20px«. Тогда верхний и нижний отступ будут равны 10px, а правый и левый будут равны 20px. А если передать 3 значения «margin: 10px 20px 30px«, то соответственно верхний отступ получится 10px, правый и левый — 20px, а нижний 20px.

Свойство margin может принимать ещё и значние «auto«. Это значение центрирует элемент по горизонтали.

С помощью значения auto у margin можно центрировать только блочные элементы. Для строчных используйте text-align: center.

Попробуем продемонстрировать эту центровку:

В результате внутренний элемент будет иметь отступ сверху и снизу в 10px и находиться по центру родительского:

Этот приём центрирования используется практически на всех сайтах, на которых контент расположен в центре экрана.

Внутренний отступ (padding)

Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;)

 
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

Результат будет таким:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

  • padding-left — отступ слева
  • padding-right — отступ справа
  • padding-top — отступ сверху
  • padding-bottom — отступ снизу

Проблема расширения (box-sizing)

У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента «width: 200px;«, но у одного установим свойство padding:

 
Без отступа
С отступом

В браузере получится такой результат:

Без отступа
С отступом

Оба элемента имеют одинаковую ширину «width: 200px;«. Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box):

 
Без отступа
С отступом

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

Без отступа
С отступом

Расширение элементов из-за внутреннего отступа padding иногда сильно мешает. Особенно при создании мобильных версий сайтов. Из-за них чаще всего на мобильных устройствах появляется горизонтальная прокрутка. Поэтому заранее убедитесь, что поставили свойство box-sizing в значение border-box для самых больших элементов на странице .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *