Как опустить текст css
Перейти к содержимому

Как опустить текст css

  • автор:

Как опустить текст вниз блока div?

Всем привет! У меня есть блок div в котором содержится текст. Каким атрибутом CSS можно опустить этот текст вниз блока?
Заранее спасибо!

. согласен с 1 ответом.

padding-top или margin-top

Если перенести текст вниз, как при нажатии клавиши Enter, то можно просто вставить

Если оставить DIV на месте, никуда его не перемещая, то для внутреннего его содержимого отступы будут прописаны однозначно только свойством : PADDIND. Для того, чтобы отступ был снизу, то padding-bottom: значение;

Как спустить текст вниз?

Скрипт написан здесь Блок на css Я вставил туда ссылку и у меня щас пробелма. Я сделал этот блок высотой 50px и щас мне надо опустить на 16px. Я сделал margin-top: 16px; но не работает. (header — это тот самый стиль блока; txt-logo — стили текста)

Как мне опустить текст вниз?
Отслеживать
задан 8 фев 2014 в 14:58
380 1 1 золотой знак 4 4 серебряных знака 19 19 бронзовых знаков
Не совсем понятно, что вам требуется получить?
8 фев 2014 в 19:04

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.txt-logo < color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); font-size: 26px; margin-left: 6%; // зачем если все равно обнуляете в конце? text-align: center; text-decoration: none; margin: 0; padding-top: 16px; // может это вам надо? >

Отслеживать
ответ дан 8 фев 2014 в 19:02
2,542 13 13 серебряных знаков 12 12 бронзовых знаков
Не работает, но я уже решил оставить так как есть.
8 фев 2014 в 19:14
Оставил вот такой скрипт: ` .txt-logo < color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); font-size: 26px; margin-left: 6%; text-decoration: none; >`
8 фев 2014 в 19:15

@cnofss, а с каких пор код CSS называется скриптом? Может это какие-то новые веяния в верстке, а я и не знал . -)

9 фев 2014 в 3:25

Ну что вам конкретно надо вниз опустить? Текст ссылки? Если да, то может вам попробовать отдельное правило для ссылки? .txt_logo a < display: block; margin:16px auto 0 auto; >

9 фев 2014 в 5:56
Вот этот вариант работает 😀
9 фев 2014 в 9:06

Margin не сработал по причине того что тег a является inline он по умолчанию не может двигаться вверх или вниз ОТСТУПАМИ.

Отсюда можно сделать вывод, если хотим сделать отступ сверху нужно чтобы элемент перестал быть inline. Например так:

display: inline-block; margin-top: 100px; 

Так же мы можем позиционировать элемент относительно экрана/родителя/своего места в DOM. с помощью (пример позиционирования элемента относительно родителя, у родителя тоже должен быть position: relative):

position: absolute; top: 100px; left: 5px; 

Так же мы можем сдвинуть элемент с помощью трансформаций например(сдвинуть по Y Элемент относительно своего места в DOM):

transform: translateY(-50px); 

Вертикальная позиция для строчного элемента

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

в меню числа выше базовой линии текста

Зачастую данная задача решается применением тегов для этого предназначенных — и . Но если перед тобой стоит задача «Установить фразу на 4px выше базовой линии» sup тебе уже не поможет, т.к. их позиция зависит от допустимых значений vertical-align — middle, text-top и т.д. В общем это не гибко, значит в работе могут появиться ограничения. А мы не любим ограничений и жестких рамок, потому будем думать и искать решение.

Попробуем поднять слово на 4px выше базовой линии текста:

в абзаце красное слово поднято на 4px

Первое, что делаем — нужное слово (участок текста) оборачиваем в какой-нибудь элемент, например span или тот же sup (элемент должен быть строчным, чтобы не оказаться на отдельной строке). Заключаем в тег чтобы иметь возможность задать отдельные свойства.

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

Самое простое, что может прийти в голову — это попробовать отрицательный отступ с помощью margin-top:

span <
margin-top: -4px;
>

Но это конечно же не сработает, т.к. на margin-top / margin-bottom откликаются только блочные элементы.

Пришло время вспомнить о свойстве position и его значении relative. position: relative обычно применяют к элементу, чтобы дочерние элементы с абсолютным позиционированием, позиционировались относительно его границ. Но position: relative так же дает возможность перемещать элемент, не влияя на окружение. Двигать можно оперируя координатами top, left, right, bottom.

span <
position: relative;
top: -4px;
>

Решение оказалось очень простым.

Заметки

  • Если на странице имеются элементы, которые даже потенциально могут перекрыть участок текста (элемент), который двигали, этому элементу следует явно указать z-index, чтобы в будущем не было сюрпризов.

span <
position: relative;
z-index: 1;
top: -4px;
>

  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

      каким образом опустить текст в нужное место в css??

      мой сайт [ссылка заблокирована по решению администрации проекта] текст в блоках опустить не могу («меню сайта»»добро пожаловать»,»вперёд на поиски») подскажите как это сделать. (ответы только строго касающиеся темы)

      ОЧЕНЬ ПРОШУ ОТВЕТЫ ПИСАТЬ ПО СОБСТВЕННОМУ ОПЫТУ А НЕ ДЕЛИТЬСЯ ССЫЛКАМИ!!

      Голосование за лучший ответ

      Вот так нужно работать с атрибутом DIV.
      И так чтобы переместить блог DIV нужно ввести координаты
      Например введем в СSS так:
      div.block1 <
      margin-top: 50px;
      margin-left: 200px;
      >
      Ну а дальше какие атрибуты нужно то и добавляешь.
      Ну а в HTML
      коде это будет выглядеть так:
      Твой текст.

      Ну а теперь объясню как это работает.
      Атрибут margin-top указывает расстояние между верхней частью экрана и блога с текстом.
      Ну в margin-left указывает расстояние между левым частей экрана и блога с текстом.

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

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