Как настроить положение определенных элементов / элементов / контента на странице с помощью CSS

0

Я новичок (ish) в HTML и CSS. Я создаю сайт, но он чувствует, что я не получаю такого контроля над ним, насколько это возможно. Контроль за позиционированием и размещением элементов/элементов/объектов.

Пример изображения

Вопрос: Как настроить положение отдельных элементов/элементов/содержимого на странице с помощью CSS. В этом случае "Горизонтальное правило". Как я могу перемещать/толкать "Горизонтальное правило" ближе к тексту над ним. 5 звезд и текст. И если бы я хотел, чтобы я мог разместить больше пространства между заголовком и изображением?

Например. В HTML у меня есть "Горизонтальное правило", отделяющее изображение и текст выше от текста ниже. Смотрите это изображение здесь.

"Горизонтальное правило" на этом рисунке находится в div. 5-звездная рейтинговая система и ее текст находятся в div. Изображение находится в div, а заголовок (все над изображением) находится в div. Наконец, эти 4 divs находятся в контейнере div. Как я могу нажимать "Горизонтальное правило" ближе к 5 звездам и тексту, не влияя на что-либо еще на странице?

Для моего кода см. Мою ссылку в комментарии ниже. Я не могу опубликовать более двух ссылок из-за репутации. Благодарю.

Ваш ответ будет оценен. Заранее спасибо!

  • 1
    Не могли бы вы опубликовать свой полный HTML или предоставить ссылку? Это облегчит вам руководство.
  • 0
    Вот ссылка на мой код. «Горизонтальное правило» находится в классе div «boxcontent» pastebin.com/rj7F2dp3
Показать ещё 3 комментария
Теги:
website

2 ответа

0
Лучший ответ

Вы можете попробовать что-то вроде:

hr { width: 100%; height: 1px; color: #CCC; margin-top: -2px; }

Не уверен, есть ли какой-либо риск, используя отрицательные поля... Я, конечно, не эксперт по CSS.

Поделиться
  • 0
    Это сделал именно то, что я тоже хотел. Но так как вы не уверены, будет ли это иметь какие-либо негативные последствия, я не уверен в его использовании или мне следует его использовать. Как это работает? Сделал margin-top: -2px; переместить час на вершину div? Или это переместило это вне вершины div?
  • 0
    Я не уверен, какой будет лучшая практика здесь, хотя я только что обнаружил эту статью - coding.smashingmagazine.com/2009/07/27/…, которая предполагает, что они вполне допустимы для использования.
Показать ещё 1 комментарий
0

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

Чтобы ваши теги <hr> занимали минимальное пространство, поэтому они максимально приближены к другим элементам, вы можете установить их маржу и отступы на 0.

hr{padding:0;margin:0;}

Следующим шагом будет установка поля и заполнения элементов выше и ниже тэгов <hr>.

Вот пример, который показывает разницу, изменяя отступы/поля тегов <hr>.

Необходимо установить только маржу, поскольку по умолчанию по умолчанию уже установлено ноль. Проверьте здесь значения по умолчанию для <hr>.

Надеюсь это поможет

Поделиться
  • 0
    Да, было очень полезно спасибо за информацию.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню