Изменение внутренних отступов внутри тега <legend>

@Точкару · Регистрация: 28.12.2015

Студворк — интернет-сервис помощи студентам

Я только осваиваю верстку и не смог реализовать задачу: обеспечить изменение величины padding по обе стороны контента что внутри тега legenda в зависимости от длины этого контента.
При условии когда жестко задана длина верхних линий в разрыве которых находится контент тега legenda приходится изменять величину padding при изменении длины контента тега legenda, например при замене этого контента.
Возможно ли это сделать с помощью CSS? С помощью свойства calc() это не удалось.

@mrtoxas · 08.07.2016, 20:43

Если я правильно понял, то надо не паддингом увеличивать, а:

CSS
1
2
3
.legend{
  width:600px;
}

Если не правильно понял, тогда приложите тот код, где у вас некрасиво выходит.

@Точкару · 08.07.2016, 21:10 **[ТС]**

На одной странице несколько рамок одинаковой ширины. И во всех рамках должны быть одинаковые верхние разрывные линии. При изменении контента это обеспечивается изменением padding. Если задать жестко width для legend, то изменится шрифт контента legend или он пойдет в 2 строки. Это не допустимо.

@mrtoxas · 08.07.2016, 21:16

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrapper{
  width:60%;
  margin:20px auto;
  padding:20px;
  border:1px solid black;
  position:relative;
}
.wrap-legend{
  position:absolute;  
  text-align:center;
  top:-10px;
  left:0;
  right:0;
}
.legend{
  display:inline-block;
  padding: 0 20px;
  background:#fff;  
}

HTML5
1
2
3
4
5
6
<div class="wrapper">
  <div class="wrap-legend">
    <div class="legend">ABOUT US</div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam maxime, quam, harum incidunt reprehenderit ipsum qui distinctio est, repellendus, aliquid animi labore quidem sed unde quasi facere quaerat inventore. At.</p>
</div>

@Точкару · 08.07.2016, 21:32 **[ТС]**

Если изменять контент ABOUT US, то изменяется рамка: http://codepen.io/moisey/pen/bZoEWo

@mrtoxas · 08.07.2016, 21:36

Как бы так и делал

Не понимаю как надо

Вы хотите, чтобы при расширении одной рамки другие делали такой же отступ?

@Точкару · 08.07.2016, 21:51 **[ТС]**

А ведь Вы правы, насчет задать жестко width для legend. Но только требуется еще задать padding 0; и тогда все работает как надо!

Добавлено через 9 минут
Вот мой кусок кода. Можно изменять

Добавлено через 2 минуты
Спасибо огромное за помощь!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@Точкару 0 / 0 / 1 Регистрация: 28.12.2015 Сообщений: 85

	Изменение внутренних отступов внутри тега <legend> 08.07.2016, 20:37. Показов 2673. Ответов 6 Метки нет (Все метки) Я только осваиваю верстку и не смог реализовать задачу: обеспечить изменение величины padding по обе стороны контента что внутри тега legenda в зависимости от длины этого контента. При условии когда жестко задана длина верхних линий в разрыве которых находится контент тега legenda приходится изменять величину padding при изменении длины контента тега legenda, например при замене этого контента. Возможно ли это сделать с помощью CSS? С помощью свойства calc() это не удалось. 0

@Точкару 0 / 0 / 1 Регистрация: 28.12.2015 Сообщений: 85
	08.07.2016, 21:10 [ТС]
	На одной странице несколько рамок одинаковой ширины. И во всех рамках должны быть одинаковые верхние разрывные линии. При изменении контента это обеспечивается изменением padding. Если задать жестко width для legend, то изменится шрифт контента legend или он пойдет в 2 строки. Это не допустимо. 0

@Точкару 0 / 0 / 1 Регистрация: 28.12.2015 Сообщений: 85
	08.07.2016, 21:32 [ТС]
	Если изменять контент ABOUT US, то изменяется рамка: http://codepen.io/moisey/pen/bZoEWo 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.07.2016, 21:36
	Как бы так и делал Не понимаю как надо Вы хотите, чтобы при расширении одной рамки другие делали такой же отступ? 0

@Точкару 0 / 0 / 1 Регистрация: 28.12.2015 Сообщений: 85
	08.07.2016, 21:51 [ТС]
	А ведь Вы правы, насчет задать жестко width для legend. Но только требуется еще задать padding 0; и тогда все работает как надо! Добавлено через 9 минут Вот мой кусок кода. Можно изменять Добавлено через 2 минуты Спасибо огромное за помощь! 0

Изменение внутренних отступов внутри тега <legend>

Решение