Как установить отступ заголовков css

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

Уменьшить расстояние между заголовком и идущим за ним текстом.

Решение

К абзацу (тег <p> ) и заголовку (тег <h1> ) автоматически добавляется верхний и нижний отступы, которые в сумме дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо добавить свойство margin-bottom к селектору H1 . Причём можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа (пример 1).

Пример 1. Использование отрицательных отступов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1

Рис. 1. Расстояние между заголовком и основным текстом

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

Ширина заголовков (H1, H2 и т. д)

Я хочу, чтобы мои заголовки (от h1 до h6) имели цвет фона (отличный от фона страницы), я также хочу, чтобы ширина этого фона была такой же, как ширина текста в заголовке, плюс заполнение (а не ширина контейнера, в котором находится заголовок, что и происходит сейчас).

Нет особого смысла показывать Вам какой-либо код, так как это довольно просто (или должно быть так!). Контейнер имеет фиксированную ширину. Прямо сейчас у меня есть только некоторые поля, отступы, цвет фона и стиль шрифта, установленные для тегов h1, h2, h3 и т. д.

EDIT: думаю, код поможет! https:/ / web.archive.org/web / 20090724165158/http://adriantrimble.com/headers (здесь применяется решение Джеральда, хотя очевидно, что это все равно не будет работать в IE6/7 и все еще имеет проблемы в новых браузерах). Использование display:inline вызывает больше проблем, чем решает, использование float: left и clear: left, как уже упоминалось, имеет проблемы из-за расположения 2 столбцов. Спасибо всем за помощь до сих пор.

7 ответов

Я генерирую PDF, используя TCPDF и множество writeHTML() вызовов. Иногда, когда у меня есть теги заголовков (h1, h2 и т. д.) В HTML, заголовки находятся внизу страницы, и соответствующее содержимое разбивается и перемещается на следующую страницу. Есть ли какой-нибудь способ иметь TCPDF либо 1).

Изучая новый тег раздела HTML5, я задаюсь вопросом об обработке тегов h1, h2, h3, h4, h5 и h6. В спецификации HTML5 говорится, что элементы[h1, h2 и т. д.] представляют заголовки для своих разделов ( http://www.w3.org/TR/html5/разделы. html#the-h1-h2-h3-h4-h5-and-h6-elements ). далее в разделе.

h1-h6-это элементы уровня блока, и даже если они не находятся в контейнере (или просто в теле), они будут растягиваться по ширине окна. Одним из решений является изменение их отображения на встроенный блок:

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

Я бы использовал

редактировать после комментария

Если содержащий div плавает, то clear не очистит левый col. Так что плавайте вправо влево и удалите поле

Тег заголовка (h1-h6) является элементом уровня блока и, таким образом, заполняет ширину контейнера, в котором он находится. Изменение его на

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

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

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

как упоминали другие, display:inline-block; был бы вариантом, но не работает во всех broswers. что я мог бы придумать прямо сейчас, так это дать заголовкам a float:left; и элементу, который следует за a clear:left;

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

Если вы хотите, чтобы ваши hx h1 , h2 , h3 и т. Д. чтобы иметь то же самое с текстом в нем, вы можете попробовать

Он не нарушает крах маржи, как display: inline-block или float: left .

Я заметил,что размеры шрифтов H1,H2, H3 и т. д. меньше в CKEditor, чем когда они отображаются на веб-странице. Вы можете проверить их демо-страницу http://ckeditor.com/demo#full . Каково же решение этой проблемы. Я хочу видеть размеры шрифтов H1,H2,H3 . такими же большими, как они отображаются.

Я хотел бы иметь два разных стиля для h1, h2, h3 и т. д. Я попробовал использовать классы для таких стилей, как этот: .version-one < h1< . >h2 < . >> А потом в html: <h1 Но это не сработало. Есть ли способ сделать это? Большое вам спасибо 🙂

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

Другой способ добавить цвет фона к элементу заголовка, ширина которого равна ширине его текста (без использования дополнительных элементов или свойств отображения),-это использовать селектор CSS в первой строке;

Похожие вопросы:

Я хочу выбрать элемент заголовка (будь то h1, h2, h3, h4, h5 или h6), который находится ближе всего над формой, используя XPath в PHP. <h2>Foo</h2> <h3>Bar</h3> <form>.

В настоящее время у меня есть несколько стилей общего назначения H1, H2, H3 для моего сайта, которые отлично подходят для большинства заголовков ‘general’, где мне нужен простой заголовок.

Я создаю настраиваемые пользователем шаблоны HTML и решаю, какие типы элементов использовать. С одной стороны, я мог бы использовать наиболее подходящий тип элемента HTML для каждого типа контента -.

Я генерирую PDF, используя TCPDF и множество writeHTML() вызовов. Иногда, когда у меня есть теги заголовков (h1, h2 и т. д.) В HTML, заголовки находятся внизу страницы, и соответствующее содержимое.

Изучая новый тег раздела HTML5, я задаюсь вопросом об обработке тегов h1, h2, h3, h4, h5 и h6. В спецификации HTML5 говорится, что элементы[h1, h2 и т. д.] представляют заголовки для своих.

Я заметил,что размеры шрифтов H1,H2, H3 и т. д. меньше в CKEditor, чем когда они отображаются на веб-странице. Вы можете проверить их демо-страницу http://ckeditor.com/demo#full . Каково же решение.

Я хотел бы иметь два разных стиля для h1, h2, h3 и т. д. Я попробовал использовать классы для таких стилей, как этот: .version-one < h1< . >h2 < . >> А потом в html: <h1.

Каков правильный код для превращения заголовка h1,h2 и т. д. В ссылку и search engines индексных текстов заголовка и ссылки? Это: <a href=#><h1>heading</h1></a> или.

Я хочу установить некоторые общие глобальные настройки, например, для первых 6 типов заголовков в CSS, например, h1, h2, h3, h4, h5, h6 < font-family: ‘Roboto’, sans-serif; font-weight: 700; color.

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

HTML / CSS автонумерация заголовков?

Есть ли способ (желательно легкий), чтобы принять рубриках и разделах счетчик в HTML/CSS? возможно, библиотека JS?

Или это то, что трудно сделать в HTML?

Я смотрю на приложение для корпоративного wiki, но мы хотим иметь возможность использовать номера заголовков, как это всегда бывает в текстовых процессорах.

7 ответов

Итак, я думаю, что это проблема CSS больше, чем что-либо еще, но в основном HTML, который я предоставил, содержит фиксированную таблицу заголовков в реактивном макете. Код: http://jsfiddle.net/JpRQh/10 / Есть 3 строки данных, но в IE9 кажется, что строки таблицы безумно высоки, а полоса прокрутки.

может ли кто-нибудь помочь мне с созданием фиксированных заголовков в таблице, используя только css (без js). Он должен поддерживать динамические данные, поскольку размеры столбцов поступают из БД. Только нужно работать в ie7/8. Ура

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

Это приведет к тому, что h2 получит 1., 2., h3 получит 1.1, 2.1, 2.2 и т. Д.

Как говорит Лпфавро, это то же самое, что и другой вопрос , в который я верю.

Также обратите внимание, что использование css не изменит заголовок (например, выделенный текст даст вам заголовок без цифр). Это может быть или не быть желательным. (принятый) ответ lpfavreau даст вам код jquery для изменения текста заголовка.

3-я Сторона Править

обновление за 2016 год. Пожалуйста, смотрите ответ Стивена ниже для правильного метода в CSS. Мой ответ имел смысл в 2009 году, когда браузеры и библиотеки были другими. Сейчас мы живем в совершенно новом мире, и представленный здесь метод устарел. Я оставляю это для бедных душ, которые все еще живут в корпоративных микрокосмах, сделанных из IE7 и слез.

См. Этот другой вопрос , если вам интересно, как это сделать в CSS, ответ может быть тем, что вы ищете. Но у titel тоже есть хорошее предложение, в зависимости от того, как сделан ваш документ HTML.

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

Конечно, было бы легко использовать что-то вроде jQuery , чтобы также выполнить приращение. Что-то вроде этого непроверенного фрагмента:

Конечно, не забудьте включить файл jquery.js в свой документ.

Я пытаюсь разместить свои заголовки таблицы HTML, используя свойство width, и это asif, они полностью игнорируются. Заголовок ‘Company Type’ разделяется на две строки, как и тип занятости? У меня нет никакой таблицы css в моем файле css. Какие свойства я могу использовать, чтобы каждый из.

Как отправить файл CSS клиенту с помощью заголовков сервера?

Самым простым методом были бы нумерованные списки

будет что-то вроде:

  1. Раздел
    I. Вложенный один
    II. Вложенные два
  2. Раздел
  3. Раздел
  4. Раздел

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

По крайней мере, это невозможно сделать с HTML/CSS, — если только вы вручную не добавите все числа в свои заголовки.

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

Существует также возможность использовать неупорядоченные списки и CSS, как показано в этом примере:

Похожие вопросы:

Я начинаю создавать свой первый веб-сайт для класса в моей школе. У меня были проблемы с установкой цвета текста моих двух заголовков в классе .headers. Мои заголовки (точки есть, потому что idk как.

Вопрос в том, должны ли мы проектировать приложения/формы с использованием заголовков или придерживаться spans и divs? Когда мир использовал html для связывания документов, эти теги заголовков.

У меня есть функция Javascript, когда она возвращает определенное значение, я хотел бы изменить цвета различных заголовков таблиц, используя их идентификатор. Как я могу изменить цвет заголовка.

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

может ли кто-нибудь помочь мне с созданием фиксированных заголовков в таблице, используя только css (без js). Он должен поддерживать динамические данные, поскольку размеры столбцов поступают из БД.

Я пытаюсь разместить свои заголовки таблицы HTML, используя свойство width, и это asif, они полностью игнорируются. Заголовок ‘Company Type’ разделяется на две строки, как и тип занятости? У меня.

Как отправить файл CSS клиенту с помощью заголовков сервера?

Я знаю, что могу изменить размер отдельных заголовков html, используя css (например, h1 ).), однако я хотел бы в целом уменьшить размер всех заголовков (h1, h2, h3 и т. д.).

Так что я все еще немного новичок в HTML/CSS и импортировал пользовательский шрифт. У меня на сайте много однострочных заголовков и абзацев, но они требуют много разных стилей. Я не могу.

У меня есть html-документ, который генерируется приложением. Я хочу сделать отступы во всем этом документе, кроме заголовков h2. Я играл с css: не селектор, но я не могу заставить его работать так.

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

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