Позиционирование строчного элемента

@marketarea · Регистрация: 11.06.2016

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

Здравствуйте! Если внутри блока есть элементы которые нужно спозиционировать/расставить отступы друг от друга относительно данного блока.
Мы можем это сделать с помощью relative(top и тд) или margin.
Как будет правильней?)

@mrtoxas · 23.06.2016, 23:52

marketarea, надо плясать от конкретной ситуации. Например, если родитель абсолютно спозиционирован, то чтобы не городить новые обертки, лучше использовать margin.

@marketarea · 23.06.2016, 23:55 **[ТС]**

Например, родитель relative, внутри родителя нужно спозиционировать <a> относительно <h3>
мне что <a> нужно помещать в <div> для того чтобы его спозиционировать или я могу применить непосредственно к нему relative или margin?

@mrtoxas · 23.06.2016, 23:59

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

@marketarea · 24.06.2016, 00:01 **[ТС]**

тоесть нет какого нибудь правила или еще чегото которое говорит что лучше использовать тото но если ... то лучше тото)?

@mrtoxas · 24.06.2016, 00:03

можно привести код, хотя бы одним способом? А то так гадать долго можно

@marketarea · 24.06.2016, 00:04 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="louis">
                <h3>Louis XX</h3>
                <ul>
                    <li><span>Designer</span>:Philippe Starck</li>
                    <li><span>Typology</span>:Chairs</li>
                    <li><span>Client</span>:Vitra</li>
                    <li><span>Year</span>:2012</li>
                </ul>
                <a href="#">View project</a>
                <a href="#"><img src="img/heart_w.png"></a>
                <span>+200</span>
</div>

@mrtoxas · 24.06.2016, 00:06

И куда надо ссылку установить?

@marketarea · 24.06.2016, 00:08 **[ТС]**

заголовок, ниже список, ниже ссылка, ниже ссылка-картинка, ниже спан.

Добавлено через 27 секунд
с нижним отступами в 20пх

@mrtoxas · 24.06.2016, 00:10

если просто вертикальные отступы между элементами, тогда margin - это его прямое назначение

@marketarea · 24.06.2016, 00:11 **[ТС]**

да, но если к примеру жны еще отступы с лева(у всех разные) да и еще к примеру топ и ботом маргины применить к <a> неполучается...

@mrtoxas · 24.06.2016, 00:20

Все получается

Каждому элементу назначается свой класс и задаются отступы. Если надо ссылке дать вертикальные отступы, то надо превратить ее в блочно-строчный или в блочный элемент:

HTML5
1
2
3
4
5
6
7
8
<style>
.qwerty{
  display:inline-block; 
  /*или display:block*/
  margin:20px 30px 40px 20px;    
}
</style>
<a href="#" class="qwerty">Cсылка</a>

@marketarea · 24.06.2016, 00:24 **[ТС]**

угу), спасибо. Учим дальше

Добавлено через 52 секунды
тоесть правильней изменить display чем позиционировать ссылку через relative скажем?

@mrtoxas · 24.06.2016, 00:26

Да, тут позиционирование не надо. А в ланном случае, лучше обернуть ссылки и span дивом и ему задать вертикальный отступ

@marketarea · 24.06.2016, 00:35 **[ТС]**

а почему лучше оборачивать в див?
извиняюсь за дотошность..)

Добавлено через 30 секунд
лишний код вроде тогда как получится

@mrtoxas · 24.06.2016, 00:38

Лишний код получится, если обернуть каждую ссылку блоком

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

@marketarea · 24.06.2016, 13:26 **[ТС]**

допетрал. спс!

Добавлено через 12 часов 47 минут
А если к примеру мне нужно спозиционировать ссылку и именно спозиционировать через top/left/right, что будет правельней, задать relative и к примеру минусовый отступ с верху(пере ссылкой расположен блочный елемент), или absolute и положительный отступ сверху.

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

@dimon888951 · 24.06.2016, 13:40

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

@marketarea · 24.06.2016, 14:13 **[ТС]**

Согласен.
А есть какие нибудб общие правила для современной верстки, каккая она должна быть?

Добавлено через 1 минуту
нужно что то типа чек листа) чтоб я мог всегда туда глянуть, особенно на начальном этапе изучения.

Новые блоги и статьи Все статьи Все блоги /
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 на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261

	Позиционирование строчного элемента 23.06.2016, 23:45. Показов 2166. Ответов 18 Метки нет (Все метки) Здравствуйте! Если внутри блока есть элементы которые нужно спозиционировать/расставить отступы друг от друга относительно данного блока. Мы можем это сделать с помощью relative(top и тд) или margin. Как будет правильней?) 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.06.2016, 23:52
	marketarea, надо плясать от конкретной ситуации. Например, если родитель абсолютно спозиционирован, то чтобы не городить новые обертки, лучше использовать margin. 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	23.06.2016, 23:55 [ТС]
	Например, родитель relative, внутри родителя нужно спозиционировать <a> относительно <h3> мне что <a> нужно помещать в <div> для того чтобы его спозиционировать или я могу применить непосредственно к нему relative или margin? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.06.2016, 23:59
	marketarea, ссылке можно дать абсолютное позиционирование. Но если ссылка идет в непосредственной близости от заголовка и от него надо просто отступить, то лучше маргином. 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	24.06.2016, 00:01 [ТС]
	тоесть нет какого нибудь правила или еще чегото которое говорит что лучше использовать тото но если ... то лучше тото)? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.06.2016, 00:03
	можно привести код, хотя бы одним способом? А то так гадать долго можно 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.06.2016, 00:06
	И куда надо ссылку установить? 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	24.06.2016, 00:08 [ТС]
	заголовок, ниже список, ниже ссылка, ниже ссылка-картинка, ниже спан. Добавлено через 27 секунд с нижним отступами в 20пх 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.06.2016, 00:10
	если просто вертикальные отступы между элементами, тогда margin - это его прямое назначение 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	24.06.2016, 00:11 [ТС]
	да, но если к примеру жны еще отступы с лева(у всех разные) да и еще к примеру топ и ботом маргины применить к <a> неполучается... 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	24.06.2016, 00:24 [ТС]
	угу), спасибо. Учим дальше Добавлено через 52 секунды тоесть правильней изменить display чем позиционировать ссылку через relative скажем? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.06.2016, 00:26
	Да, тут позиционирование не надо. А в ланном случае, лучше обернуть ссылки и span дивом и ему задать вертикальный отступ 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	24.06.2016, 00:35 [ТС]
	а почему лучше оборачивать в див? извиняюсь за дотошность..) Добавлено через 30 секунд лишний код вроде тогда как получится 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.06.2016, 00:38
	Лишний код получится, если обернуть каждую ссылку блоком В данном случае это надо для того, чтобы задать отступ одновременно всем элементам, а не каждому в отдельности, что будет совсем не хорошо. И тогда ссылки можно оставить строчными. 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	24.06.2016, 13:26 [ТС]
	допетрал. спс! Добавлено через 12 часов 47 минут А если к примеру мне нужно спозиционировать ссылку и именно спозиционировать через top/left/right, что будет правельней, задать relative и к примеру минусовый отступ с верху(пере ссылкой расположен блочный елемент), или absolute и положительный отступ сверху. И есть каккая нибудь общая схема/правило которым в таким случаях руководствувотся, будет ли рошибка/или плохой тон если сделать как то иначе? Хочу на этапе изучения выработать общие правила для себя, чтоб потом от них работать. 0

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	24.06.2016, 13:40
	Я смотрю по верстке это карточка, все зависит от конкретного случая и желаемого результата. Если сложная карта, тогда обертку в релатив, внутренние элементы в абсолют и позиционируем. В Вашем случае, можно в релатив обертку , можно и без, зависит от общей верстки. Этому блоку задал бы padding, чтоб внутренние элементы отступили, выровнял бы их по центру, а по горизонтали марджинами. 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	24.06.2016, 14:13 [ТС]
	Согласен. А есть какие нибудб общие правила для современной верстки, каккая она должна быть? Добавлено через 1 минуту нужно что то типа чек листа) чтоб я мог всегда туда глянуть, особенно на начальном этапе изучения. 0

Позиционирование строчного элемента

Решение