Абзацы в ячейке таблицы

24.11.2017   Соколов В.       WordPress       Оставить комментарий

Алина пишет:

Здравствуйте!
Вопрос аналогичный, и речь не об абзаце в тексте, а об абзаце в ячейке. И у меня вопрос именно в enter» — как уменьшить интервалы между абзацами именно в ячейке таблицы?

 

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

<p style="margin: 0;">Текст любого абзаца</p>

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

<p style="margin-top: 0; margin-bottom: 0;">Текст любого абзаца</p>

Чтобы это работало для всех таблиц, можно добавить в таблицу стилей (файл style.css в теме оформления) отступ для абзацев в ячейке:

td p {
margin: 0;
}

Это будет убирать отступ для тех тегов абзаца <p>, которые находятся внутри тега ячейки таблицы <td>

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

.class1 p {
margin: 0;
}

А в любом теге таблицы, например, <table> или <tbody> добавляем этот класс:
<table class="class1">
Так мы уберем отступы для абзацев, заключенных внутри класса class1, что дополнительно позволяет убрать отступ не во всех таблицах, а только в тех, где добавлен этот класс.

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

Напомню, что приоритеты следующие, по возрастанию:
class — id — style — теги

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

Второй вариант может не работать из-за того, что уже указан отступ для абзаца внутри идентификатора id (#), тегов <table> <tbody> <td>, классов, что займет значительно больше времени.

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

.class1 p {
margin: 0 !important;
}

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

Оглавление

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