Как сделать внутренний и внешний отступ у элементов в html-разметке на css?

Нюансы работы с внешними отступами в CSS

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

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания внешних отступов (нюансы применения)</title>
<style> 
.primer1 {
margin-bottom: 10px; /* устанавливаем внешний отступ снизу 30px */
}
.primer2 {
margin-top: 20px; /* устанавливаем внешний отступ сверху 20px */
}
</style>
</head>
	<body>
		<p class = "primer1">Хорошо живёт на свете Винни Пух.</p>
		<p class = "primer2">От того поёт он эти песни вслух.</p>
	</body>
</html>

В данном примере мы указываем для класса .primer1 значение нижнего внешнего отступа равным 10px, а для второго класса .primer2 значение верхнего внешнего отступа 20px. После этого мы разместили два абзаца (HTML тег <p>) один под другим и задали им наши классы.

По логике расстояние между ними должно быть 30px (10px внешнего отступа снизу с первого класса + 20px внешнего отступа сверху второго элемента), а по факту мы получили отступ 20px, так как браузер выбрал большее. Обязательно при верстке учитывайте этот момент.

Как вы можете заметить значение отступа снизу у второго абзаца равно 16px — это значение, которое установлено браузером по умолчанию.


Рис. 79 Пример указания внешних отступов (нюансы применения).

Чтобы обойти такие конфликты, можно было использовать для одного из абзацев не внешние, а внутренние отступы (CSS свойство padding).

inline-block

Значит, inline-block — представляет собой этакую «коробочку», в которой содержатся буковки, т.е. некий коробок со спичками. Этот коробок представляет из себя блок, с поведением строки, т.е. по сути является строчно-блочным элементом.
Строчное поведение inline-block позволяет ему оставаться в одной строке с другими строчными элементами, например <span>-ом или попусту сливаться с обычными буквами, т.е. вести себя, как текст в строке. Ну а благодаря своим блочным способностям, inline-block-у можно смело задавать любые свойства, которые присущи блочным элементам: ширину, высоту, верхний и нижний margin, например, уже будет действовать, как у блоков.
Ну и т.д., в общем, эдакий «блок-строка»

Как видно из примера, inline-block чувствует высоту и ширину, которую мы ему прописали. Так же можно заметить одну интересную штуку, наш подопечный выровнялся по вертикали, выровнялся так, как и должны выравниваться большинство инлайн-элементов в html, т.е. по базовой линии (baseline) , т.е. выравнивается наш блок относительно своего текста, который в нём находится. Добавляем текста в блок и смотрим результат.

Блок выровнялся по базовой линии. Чего и следовало ожидать.
Сразу же приведу несколько разных примеров, поведения inline-block с разным вертикальным выравниванием.

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

inline-block — как буква

Одна из главных вещей, которые вы должны знать, это то, что наш коробок со спичками inline-block — является по сути обычной буквой — символом, т.е. весь наш строчный блок составляет всего лишь одну букву в строке, одну единицу. Даже не смотря на то, что содержит в себе кучу других символов или элементов. Именно по этой причине inline-block не «разрываются», как строчные элементы, а переносятся на следующую строку целиком. Ну и соответственно, если рядом с inline-block не будет пробелов, то расстояние между ним и соседними буквами будет обычный межбуквенный интервал (трекинг), которым можно управлять (кернинг). Если есть пробелы — до соседней буквы будет этот же интервал плюс ширина пробела.

Переваривайте эту информацию и идёмте дальше…

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующую страницу (создание вертикального меню навигации):
Практическое задание № 20.Подсказка: чтобы сформировать подобное меню Вам необходимо воспользоваться маркированным списком. Подробную информацию о использовании маркированных списков Вы сможете найти в предыдущей
статье учебника «Работа со списками в CSS». Подумайте, что необходимо сделать, чтобы Вы смогли указать для гиперссылок внутренние отступы, и не забудьте указать, что при наведении на них цвет заднего фона меняется на orangered.
Продвинутое задание (создание горизонтального меню навигации):

Практическое задание № 21.Подсказка: подумайте, что необходимо сделать с элементами маркированного списка, чтобы они выстроились в линейку?

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Работа со списками в CSS

Границы элемента

×

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Резюме:

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

Все варианты воедино:

1. Результат с margin-left (Почти рабочее решение)2. Решение с font-size (Рабочее решение)3. Результат с letter-spacing (Работающее решение)4. Результат с word-spacing (Рабочее решение)5. Вариант с намеренно прижатыми элементами (Рабочее решение)6. Решение с незакрытыми тегами (Рабочее решение)

Аналогичную статью я недавно опубликовал на хабре

Padding — Сокращенное свойство

Чтобы сократить код, можно указать все свойства отступа в одном свойстве.

Свойство — это сокращенное свойство для следующих индивидуальных свойств отступа:

Т.о., вот как это работает:

Если свойство имеет четыре значения:

  • padding: 25px 50px 75px 100px;
    • верхний отступ 25px
    • правый отступ 50px
    • нижний отступ 75px
    • левый отступ 100px

Используйте сокращенное свойство padding с четырьмя значениями:

div { 
padding: 25px 50px 75px 100px;}

Если свойство имеет три значения:

  • padding: 25px 50px 75px;
    • верхний отступ 25px
    • правый и левый отступы 50px
    • нижний отступ 75px

Используйте сокращенное свойство padding с тремя значениями:

div { 
padding: 25px 50px 75px;}

Если свойство имеет два значения:

  • padding: 25px 50px;
    • верхний и нижний отступы 25px
    • правый и левый отступы 50px

Используйте сокращенное свойство padding с двумя значениями:

div { 
padding: 25px 50px;}

Если свойство имеет одно значение:

  • padding: 25px;

    все четыре отступа 25px

Внешние границы (outline)

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

Значения:

  • (цвет)
  • (в системе rgb)
  • (в шестнадцатеричной системе)
  • (инвертированный, противоположный)

Значения:

  • (тонкая)
  • (средняя)
  • (толстая)
  • значение

outline-style (стиль границы)

Значения:

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

Краткая запись:

outlineoutline-color outline-style outline-width;
outline #0f0 solid thick;

Основные правила позиционирования

Блочный элемент имеет правило отступа от сторон элемента, в котором находится (margin), правило отступа для элементов внутри его (padding) и ширину рамки (border), которую тоже можно использовать.

Особое значение имеет отступ сверху. CSS внутри блока связывает правила внутренних отступов с правилами абсолютно и относительно позиционированных элементов внутри этого блока.

Обычная практика CSS-правил: можно указать отступы со всех сторон одинаково, попарно сверху/снизу и справа/слева либо для каждой стороны отдельно. Например,

  • margin: 10px;
  • padding: 10px20px;
  • padding: 10px20px30px40px.

В первом случае устанавливается отступ элемента от сторон внешнего контейнера, в котором он находится. Во втором случае отступы сверху и снизу равны 10px, слева и справа — 20px. В третьем случае указаны размеры отступов по всем сторонам: сверху, справа, снизу и слева.

Во всех указанных случаях отступ сверху CSS равен 10 px.

Блок . Свойство padding

Мы с вами разобрали свойство margin, которое делает
отступ наружу от границы. Существует также очень похожее
свойство padding,
которое делает отступ вовнутрь от границы.

Работает оно по такому же принципу — есть свойства
padding-left, padding-right, padding-top
и padding-bottom, которые задают отступ для разных сторон.
Также для свойства padding можно задавать 1, 2, 3
или 4 значения
по такому же принципу, как и в margin.

Единственное отличие — это то, что значения auto для
свойства padding не существует.

Давайте теперь посмотрим на примерах, как работает
свойство padding. Для начала приведу блок без отступов
(у него текст прилип к границам):

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

А теперь зададим padding в 30px для всех сторон:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Свойство padding для определенной стороны

Давайте зададим отступы, используя
padding-left, padding-right, padding-top
и padding-bottom:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

11 ответов

Решение

Зависит от расширения. Если это.html, вы можете использовать начать и закончить комментарий. Это действительно единственная альтернатива, о которой я могу думать. http://jsfiddle.net/SuEAW/

9

2010-09-21 03:18

Да, чтобы закомментировать структурные метаданные,

Закомментируйте большие разделы HTML (Блок комментария)

мой личный путь в .html файле открывается: и закройте его

Это обходной путь к проблеме, так как это не HTML.

Учитывая ваш код в.html…

И в случае HTML внутри PHP- файла, используя тег комментария или же и закройте его , Помните, что файл должен иметь расширение.php и не работать в формате.html.

Учитывая ваш код в.php…

Ничего не стоит, кроме HTML, но обычная практика разработчиков — закомментировать части метаданных, чтобы они не отображались и / или не выполнялись в браузере. В HTML комментирование нескольких строк может занимать много времени. Полезно исключать фрагменты структурных метаданных шаблона, содержащие комментарии, CSS или код и систематическое комментирование, чтобы найти источник ошибки. Комментировать блоки считается плохой практикой, поэтому рекомендуется использовать систему контроля версий. Атрибут «тип» является обязательным в HTML4 и необязательным в HTML5.

17

2015-05-10 04:25

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

2

2010-09-21 03:29

Поместите пробел между «->» ваших комментариев заголовка. например, «—>»

2014-01-09 14:50

Я считаю, что это тоже проклятие комментариев в стиле XML. Есть XML-редакторы, такие как eclipse, которые могут выполнять комментирование блоков. В основном автоматически добавляются лишние в строке и удаляются их. Может быть, они целенаправленно затруднили комментировать тот стиль документа, который, как предполагалось, должен был быть самоочевидным с тегами.

2010-09-21 03:27

Мои шаблоны представлений — это, как правило, файлы.php. Это то, что я буду использовать сейчас.

Решение очень похоже на то, что предложил @Robert, работает для меня. Не очень чисто, я думаю.

-1

2010-09-21 04:00

Следующее хорошо работает в файле.php.

-1

2014-04-25 16:43

У Eclipse Juno есть хороший способ для этого. Вы просто делаете cmd+

-1

2013-04-02 19:04

Нет, если вы не найдете инструмент, который делает то, что вы описали для вас.

-2

2010-09-21 03:16

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

  • Перейти к началу строки или выделенной области
  • Вставить
  • Перейти к концу строки или выделенной области
  • Вставить ->

Еще один макрос, чтобы отменить эти шаги, и все готово.

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

-3

2010-09-21 04:08

(Нож) (Ближе)

например,

-7

2014-03-22 02:34

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

img{
	padding20px; /* Поля вокруг изображения */
	margin-right10px; /* отступ справа */
	margin-bottom10px; /* отступ снизу */
	outline1px solid #666; /* параметры границы */
	background#f0f0f0; /* цвет фона */
}

Результат:

Двойная рамка с использованием CSS

Пример:

p{
	border5px solid red;
	outline6px solid orange;
}

Результат:

Путь осилит идущий,
И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Эффектные рамки для изображений

Пример:

...
.photo {
	width	 150px;
	padding	 10px 10px 20px 10px;
	border	 1px solid #BFBFBF;
	background-color	 white;
	-webkit-box-shadow	 2px 2px 3px rgba(135, 139, 144, 0.4);
	-moz-box-shadow	 2px 2px 3px rgba(135, 139, 144, 0.4);
	box-shadow		 2px 2px 3px rgba(135, 139, 144, 0.4);
}
<style><head> 
<body> 
<div class="photo">
	<img  src="2.JPG" width="150" alt="">
	<p>Не ешь меня!!!<p>
<div>
...

Результат:

Блок . Свойство padding для разных сторон

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

Четыре значения

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Два значения

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Три значения

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Рекомендованный способ в CSS и HTML

Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS. Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML <head></head>.

Следующий код создает CSS-класс «tab», который отодвигает символы и абзац на 40 пикселей от левого края:

<style type="text/css">
<!--
.tab { margin-left: 40px; }
-->
</style>

Вставив приведенный выше код в раздел <head>, можно выполнить его в любом месте, добавляя его в теги абзаца (<p>), как показано ниже:

<p class="tab">Образец табуляции</p>

Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML, добавьте следующую строчку между тегами <head> и создайте ссылку на файл. Мы назвали его «basic.css«:

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега <style> и меток комментирования, как показано ниже:

.tab { margin-left: 40px; }

Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый <p class=»tab»>, показанный выше.

Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:

.tab { text-indent:40px }

Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.

Бонусная подсказка как сделать отступ в HTML: Чтобы поменять отступ слева на отступ справа, измените свойство margin-left на margin-right.

Рекомендованный метод в HTML

Можно достичь тех же результатов используя стиль, встроенный в HTML- код. Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:

<p style="margin-left: 40px">Это текст с отступом.</p>

Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги <p> не смещены.

<p style="text-indent: 40px">Это текст с отступом.</p>

А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.

Подсказка: можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.

Бонусная подсказка: Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.

Альтернативный метод

Другой часто применяемый метод HTML отступа текста — с помощью <blockquote>, как показано ниже.

Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:

<blockquote>Эта строка будет сдвинута.</blockquote>

Данная публикация является переводом статьи «How do I indent or tab text on my web page or in HTML?» , подготовленная редакцией проекта.

Шаг 1. Определите интерлиньяж для основного текста (и сетку, которая будет для вас работать)

Я начала с гипотезы, что нам подойдёт популярная 8-пиксельная сетка (т. е. расстояния, которые кратны или делятся на 8). В качестве эксперимента я взяла основной шрифт размером 13px и интерлиньяж размером 16px и 24px. Но эти значения не подошли. В первом случае, расстояния были слишком маленькие, во втором — слишком большие.

13/16px + отступы 8px сверху и снизу = 48px ширина строки. Слишком тесно!
13/24px + отступы 8px сверху и снизу = 64px ширина строки. Слишком свободно!

Затем я решила соединить шрифт размером 13px с чётными значениями от 16 до 24px в качестве интерлиньяжа. Сначала я попробовала 18px. Если бы это сработало, то это означало, что я буду применять 6-пиксельную сетку (с расстояниями в 2, 3, 6, 12, 18, 24…). Затем я попробовала интерлиньяж в 20px, и он отлично подошёл. Значит, я буду применять 4-пиксельную сетку (с расстояниями в 2, 4, 8, 12, 16, 20…).

13/18px + отступы 6px сверху и снизу = 48px ширина строки. Всё ещё слишком тесно!
13/20px + отступы 8px сверху и снизу = 56px ширина строки. В самый раз!

Отступы в CSS — cинтаксис CSS-свойств padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin:

margin: 50px;

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

margin: 10px 20px 50px 100px;

Где:

  • 10px — отступ сверху CSS;
  • 20px — отступ справа CSS;
  • 30px — отступ снизу CSS;
  • 40px — отступ слева CSS.

Также можно установить отступ слева CSS и другие направления отдельно:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Относительное позиционирование

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

Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h2 {
		position: relative;
		top: 30px;
	  }
    </style>
  </head>

  <body>
    <h1>Заголовок первого уровня.</h1>
	<h2>Относительно позиционированный заголовок.</h2>
	<h3>Заголовок третьего уровня.</h3>
  </body>
</html>

Попробовать »

Примечание: элементы с относительным позиционированием () обычно используют в качестве родителя для элементов с абсолютным позиционированием ().

«Красная» строка

Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью «красной» строки. С помощью CSS отступ текста слева несложно сделать – используется конструкция text-indent. Записывается она так:

text-indent: 11px.

То есть первая строка абзаца будет сдвинута относительного левого края на 11 пикселей. Чтобы текст на веб-странице больше походил на документ в редакторе, следует дополнительно установить выравнивание по ширине, то есть записать:

text-indent: 11px;

text-align: justify.

Помимо пикселей, при описании разметки допускается использование других единиц – дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).

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

text-indent: inherit.

Удивительно, но абзацный отступ может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:

text-indent: -22px.

Чтобы буквы не перешли за левую границу браузера, дополнительно к text-indent нужно использовать конструкцию для задания поля:

padding-left: 22px.

Компоненты, используемые в качестве разделителей

эту

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

новый дизайн FacebookЭлемент-разделитель в дизайне Facebookданной

▍Проблемы компонентов-разделителей

  • Как компонент-разделитель занимает место в родительском компоненте? Как он ведёт себя в горизонтальных и вертикальных макетах? Например — как такой компонент разделит компоненты, расположенные вертикально и горизонтально?
  • Нужно ли стилизовать эти компоненты, основываясь на свойстве компонента-родителя (Flexbox, Grid)?

Как сделать границы

Таблицу вы сделали, задали ширину, все написали, теперь нужно привести ее в нормальный вид. Для этого таблице можно задать границу в пикселях. Делается это благодаря атрибуту border, который идет вместе с элементов <table>. Не задавайте слишком большие границы, лучше этим вы не сделаете никому.

  1. Параметр Border.
  2. Параметр CELLSPACING.
  3. CELLPADDING.

Параметр BORDER выступает за рамку вокруг вашей таблицы или каждой ячейки. По умолчанию никакие рамки не рисуются, все необходимо задавать самому изначально при каждом написании новой таблички. Задается ширина рамки в пикселях целым числом, как это показано на примере. Как показывает практика, большие границы никто не практикует, большинство пользователей устанавливают значение не больше 1-2.

Как делается граница в таблице показано на примере. Кроме всего этого, таблицу часто выравнивают по центру, так же можно пр правому краю. При создании таблицы вы указывали ее начало тегом table, вот в него помещаете, что вам нужно. Приведу несколько примеров с подробным описанием.

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

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

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

Кроме этого, для решения проблемы с отступами, не стоит забывать про первый параметр BORDER. Вся эта тройка живет своей жизнью отдельно и тем самым управлять каждым из них, можно тоже отдельно. Если хотя бы один из них не занесен к тегу table, все они будут принимать свое значение по умолчанию, тем самым вы даже не будете знать как можно добавить или уменьшить нужные отступы в таблице через блокнот.

<table border=»5″ CELLSPACING=»2″ >
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
<th>Михайлов</th>
<th>Березин</th>
<th>Комаров</th>
</tr>
<tr>
<td>3</td>
<td rowspan=»3″>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>24</td>
<td>11</td>
<td>27</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<td>127</td>
</tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<table border=»5″CELLSPACING=»2″>

<tr>

<th>Иванов<th>

<th>Петров<th>

<th>Сидоров<th>

<th>Лукашин<th>

<th>Михайлов<th>

<th>Березин<th>

<th>Комаров<th>

<tr>

<tr>

<td>3<td>

<td rowspan=»3″>4<td>

<td>8<td>

<td>12<td>

<td>1<td>

<td>13<td>

<td>14<td>

<tr>

<tr>

<td>13<td>

<td>14<td>

<td>18<td>

<td>24<td>

<td>11<td>

<td>27<td>

<tr>

<tr>

<td>113<td>

<td>114<td>

<td>118<td>

<td>124<td>

<td>111<td>

<td>127<td>

<tr>

<table>

Можно задать цвет любой ячейке или всей таблице, добавляется атрибут bgcolor и к нему уже код любого цвета. Коды цветов html можно найти в интернете, но про них я напишу отдельно новую статью. Для удобства и простоты используют небольшую программу, с ее помощью можно быстро узнать код любого цвета. Называется она ColorMania.

<td bgcolor=»#cccccc»>14</td>
<td bgcolor=»##191970″>118</td>

1
2

<td bgcolor=»#cccccc»>14<td>

<td bgcolor=»##191970″>118<td>

Шаг 2. Закон Хика и геометрическая прогрессия для определения расстояний

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

  • Все расстояния должны быть кратны базовому числу сетки, например, в моём случае, 4. Значит, я могу выбрать любые значения из этого ряда: 2, 4, 8, 12, 16, 20, 24, 28…
  • Обычно 4–5 вариантов будет достаточно даже для сложных корпоративных продуктов. Но если вам действительно нужно, то можно выбрать дополнительные значения.
  • Я решила выбрать первые четыре значения, полученные с помощью геометрической прогрессии, так как это даёт более визуально ощутимые интервалы (чтобы подчеркнуть иерархию). Итак, я получила следующие цифры: 2, 4, 8, 16.

Подробнее о том, как выбирать значения, можно почитать в этом посте от Нейтана Кёртиса (перевод).

Расположение заголовка таблицы

Давайте рассмотрим еще одно простое свойство для стилизации таблиц — caption-side, которое устанавливает расположение заголовка таблицы (над или под таблицей). По умолчанию свойство caption-side имеет значение top, которое помещает заголовок над таблицей. Для того, чтобы поместить заголовок под таблицу необходим использовать свойство со значение bottom.

Давайте рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства caption-side</title>
<style> 
td, th {
border: 1px solid blue; /* задаем сплошную границу размером 1 пиксель синего цвета */
}
.topCaption {
caption-side: top; /* заголовок таблицы находится над ней */
}
.bottomCaption {
caption-side: bottom; /* заголовок таблицы находится под ней */
}
</style>
</head>
	<body>
		<table class = "topCaption">
			<caption>Заголовок над таблицей</caption>
			<tr>
				<th>Наименование</th><th>Цена</th>
			</tr>
			<tr>
				<td>Рыба</td><td>350 рублей</td>
			</tr>
			<tr>
				<td>Мясо</td><td>250 рублей</td>
			</tr>
		</table> 
		<br>
		<table class = "bottomCaption">
			<caption>Заголовок под таблицей</caption>
			<tr>
				<th>Наименование</th><th>Цена</th>
			</tr>
			<tr>
				<td>Рыба</td><td>350 рублей</td>
			</tr>
			<tr>
				<td>Мясо</td><td>250 рублей</td>
			</tr>
		</table> 
	</body>
</html>

В данном примере мы создали два класса, которые управляют расположением заголовка таблицы. Первый класс (.topCaption) помещает заголовок таблицы над ней, мы применили его к первой таблице, а второй класс (.bottomCaption) помещает заголовок таблицы под ней, мы применили его ко второй таблице. Класс .topCaption имеет значение свойства caption-side по умолчанию и создан для демонстрации.

Результат нашего примера:


Рис. 148 Пример использования свойства caption-side.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий