Как сделать отступ между ссылками в css

8

Равные и пропорциональные отступы между ссылками CSS

Нужно задать равный и пропорциональный размерам страницы отступ между ссылками и окном браузера. Также нужно чтобы все это было адаптивным.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.13.43308

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать отступ между ссылками в css

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

1. Ради сокращения кода, задействуем в ссылках два класса — «links» (с общими свойствами) и «image» , «audio» , «video» (персональные для каждой ссылки). Этот момент подробно описан в классах справочника CSS.
2. Наши иконки имеют размер 50×50 пикселей и будут присутствовать у ссылок в качестве фона (CSS background), который мы расположим по центру вверху (50% 0) и запретим ему размножаться (no-repeat).
3. Добавляем ссылкам внутренние отступы (CSS padding), чтобы текст в ссылках не прилегал к краям. При этом верхний отступ делаем равным высоте иконок, чтобы текст не накладывался на них, ведь иконки у нас — это фон.
4. Если текста в ссылках будет очень мало, то изображения иконок обрежутся по бокам. Чтобы этого не произошло, задаем ссылкам такую минимальную ширину (CSS min-width), чтобы она как минимум была равна ширине иконок. В нашем случае надо получить минимальную ширину в 50px, однако мы задаем 40px, так как еще 10px добавится благодаря боковым отступам.
5. Чтобы минимальная ширина сработала — преобразуем ссылки во встроенные блоки (CSS display:inline-block).

1. IE6 не понимает свойство для установки минимальной ширины, но зато он интерпретирует свойство CSS width именно, как минимальную ширину. Поэтому применяем для него простой хак, который исправит данную проблему.

В данном примере мы закруглим углы у ссылок с помощь одного из способов закругления углов, описанном в соседнем подразделе. Вариант с применением CSS 3 рассматривать не будем, так как там все очень просто, а лучше сделаем закругления с использованием изображений.

1. Используя свойство CSS display:inline-block делаем ссылки встроенными блоками. В частности, это необходимо для того, чтобы мы могли указать ссылкам точную высоту, соответствующую высоте изображений.
2. Убираем подчеркивание и выравниваем текст по центру (CSS text-align:center). Вообще, в нашем случае центровать текст не обязательно, так как ссылки подстраиваются под размер текста в них и ему просто некуда выравниваться. Но вот если потребуется увеличить ширину ссылок (например, до 150px), то такое выравнивание будет как нельзя кстати.
3. Чтобы изменить внешний вид ссылок, когда они находятся под курсором мыши — добавляем в стили дополнительные селекторы с псевдоклассом CSS :hover, в которых указываем наши части изображений, но без тени.

1. Суть изменения состоит в том, что с помощью expression мы интегрируем внутрь ссылок все те же два тега <SPAN>, но только без атрибутов style содержащих стили. Вместо этого мы добавляем тегам классы «left_bok» и «right_bok» , а стили для них выносим и пишем ниже. Эти стили практически полностью такие же, как и в основном коде CSS, но только здесь все картинки идут в качестве фона тегов.

Рассмотрим еще один пример закругления углов ссылок, но уже с использованием четырех отдельных изображений-уголков.

Как сделать отступ между ссылками в css

Как сделать внутренний и внешний отступ у элементов в HTML-разметке на CSS?

Внутренний отступ с помощью CSS-свойства «padding»

Внешний отступ с помощью CSS-свойства «margin»

1. По умолчанию все популярные браузеры добавляют к ссылкам подчеркивание, которое регулируется свойством CSS text-decoration. То есть по умолчанию это свойство, для ссылок, имеет значение underline . Используя эти знания, мы и изменяем подчеркивание у ссылок в их разных состояниях.

1. Сначала убираем стандартное подчеркивание у всех ссылок, так как будем использовать нестандартные методы. Затем первой ссылке добавляем нижнюю границу рамки с помощь свойства CSS border-bottom, причем делаем ее пунктирной (dashed). Это и будет наше подчеркивание. Чтобы при наведении на ссылку подчеркивание убиралось — используем псевдокласс и делаем фон рамки таким же, как и фон страницы, то есть просто скрываем ее. По идее, здесь было бы лучше вообще сделать фон рамки прозрачным (transparent), но IE6 неправильно понимает это значение.
2. Со второй ссылкой проделываем то же, что и с первой, но только рисуем сплошную линию. Чтобы увеличить расстояние от текста до подчеркивания — задаем ссылке небольшой нижний отступ с помощью свойства CSS padding-bottom.
3. У нашей третьей ссылки подчеркивание разноцветное, поэтому его мы будем добавлять с помощью фонового изображения. Используем для этого небольшую картинку, которую подключаем через CSS background. Позиционируем фон в нижнюю часть ссылки (0 100%) и разрешаем ему дублироваться только по горизонтали (repeat-x). Подчеркивание готово, но прилегает слишком близко к тексту, чтобы это исправить — добавляем ссылке маленький отступ снизу. Теперь все.
4. В старичках IE6 и IE7 могут возникнуть проблемы с отображением подчеркивания у первой и второй ссылки. Для исправления добавляем свойство zoom :1, которое включает т.н. layout. Это свойство невалидно и его понимают только эти браузеры, поэтому лучше подключить его условными комментариями.

1. Для создания ссылок-блоков используем свойство CSS display:block, которое превращает их в блочные элементы, создающие до и после себя перевод строки. Если переводы строк не нужны — можно заменить значение на inline-block .
2. Так как ссылки теперь у нас являются блоками, то если необходимо, мы можем изменять у них ширину (CSS width) или высоту (CSS height).
3. В этом примере высоту ссылок мы вообще не указываем, а просто задаем им внутренние отступы (CSS padding), которые и расширяют блоки.

1. Все очень просто — с помощью свойства CSS border добавляем ссылкам под курсором нужную рамку. Однако, внимание, точно такую же рамку мы добавляем и обычным ссылкам, вот только цвет ее делаем такой же, как фон страницы. То есть попросту скрываем рамку до поры до времени. Это делается для того, чтобы при наведении курсора мыши, ссылки не начали «прыгать» из-за отрисовки рамки.

1. С помощью свойства CSS border добавляем ссылкам рамки, а с помощью border-color — задаем им цвет. При этом для левой и верхней границы указываем светлый оттенок цвета, а для нижней и правой — темный. Именно благодаря такому распределению цветов мы и получаем ссылки, которые похожи на трехмерные кнопки.
2. Чтобы при наведении курсора мыши казалось, что кнопки нажимаются — инвертируем у ссылок с псевдоклассом :hover цвета рамок. Для дополнительного эффекта нажатия, задаем относительное позиционирование (CSS position:relative) и делаем однопиксельное смещение вверх (CSS top:-1px).
3. Ну и чтобы все совсем было красиво — задаем ссылкам под курсором цвет текста и фона немного темнее, чем у обычных. Готово.

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

1. Ради сокращения кода, задействуем в ссылках два класса — «links» (с общими свойствами) и «image» , «audio» , «video» (персональные для каждой ссылки). Этот момент подробно описан в классах справочника CSS.
2. Наши иконки имеют размер 50×50 пикселей и будут присутствовать у ссылок в качестве фона (CSS background), который мы расположим по центру вверху (50% 0) и запретим ему размножаться (no-repeat).
3. Добавляем ссылкам внутренние отступы (CSS padding), чтобы текст в ссылках не прилегал к краям. При этом верхний отступ делаем равным высоте иконок, чтобы текст не накладывался на них, ведь иконки у нас — это фон.
4. Если текста в ссылках будет очень мало, то изображения иконок обрежутся по бокам. Чтобы этого не произошло, задаем ссылкам такую минимальную ширину (CSS min-width), чтобы она как минимум была равна ширине иконок. В нашем случае надо получить минимальную ширину в 50px, однако мы задаем 40px, так как еще 10px добавится благодаря боковым отступам.
5. Чтобы минимальная ширина сработала — преобразуем ссылки во встроенные блоки (CSS display:inline-block).

1. IE6 не понимает свойство для установки минимальной ширины, но зато он интерпретирует свойство CSS width именно, как минимальную ширину. Поэтому применяем для него простой хак, который исправит данную проблему.

В данном примере мы закруглим углы у ссылок с помощь одного из способов закругления углов, описанном в соседнем подразделе. Вариант с применением CSS 3 рассматривать не будем, так как там все очень просто, а лучше сделаем закругления с использованием изображений.

1. Используя свойство CSS display:inline-block делаем ссылки встроенными блоками. В частности, это необходимо для того, чтобы мы могли указать ссылкам точную высоту, соответствующую высоте изображений.
2. Убираем подчеркивание и выравниваем текст по центру (CSS text-align:center). Вообще, в нашем случае центровать текст не обязательно, так как ссылки подстраиваются под размер текста в них и ему просто некуда выравниваться. Но вот если потребуется увеличить ширину ссылок (например, до 150px), то такое выравнивание будет как нельзя кстати.
3. Чтобы изменить внешний вид ссылок, когда они находятся под курсором мыши — добавляем в стили дополнительные селекторы с псевдоклассом CSS :hover, в которых указываем наши части изображений, но без тени.

1. Суть изменения состоит в том, что с помощью expression мы интегрируем внутрь ссылок все те же два тега <SPAN>, но только без атрибутов style содержащих стили. Вместо этого мы добавляем тегам классы «left_bok» и «right_bok» , а стили для них выносим и пишем ниже. Эти стили практически полностью такие же, как и в основном коде CSS, но только здесь все картинки идут в качестве фона тегов.

Рассмотрим еще один пример закругления углов ссылок, но уже с использованием четырех отдельных изображений-уголков.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2022.9.29.36374

Как изменить расстояние между ссылками css

ну это уже перебор.
Это основа верстки…..

O tempora, o mores!

пробелы символами — это не кошерно ( хотел по другому объснить, но форум не читает символы utf-8)

Сообщение от conformist

**▲*
▲*▲
на тему пробелов символами

Сообщение от StopSmell

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

O tempora, o mores!

Сообщение от Ципихович Эндрю

это для всех ссылок. если нужно для определенных ссылок — заключите их в блок див, к примеру div и получите то, что нужно:

в обоих последних вариантах от StopSmell и от conformist текст ссылок отсутствует

O tempora, o mores!

то есть как? можно код и скрин?

скрин не могу
вот на сайте
Можно скачать нужные три файла отдельно

Для тех кто не знает как скачивать файлы с интернета — пользуйтесь браузером Opera

Добавлено через 1 минуту
и ксс

O tempora, o mores!

что то не пойму — все работает, отступы появляются

Сообщение от Ципихович Эндрю

видимо проблема в подключённом файле джавы и что делать?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «How to Understand and Work With CSS Margins».

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

Для людей, лишь начинающих работать с CSS, свойство margin легко становится одной из вещей, заставляющих думать, что «это идиотский, бессмысленный язык!».

Я ежедневно сталкиваюсь с подобным, как в классе, где мои ученики пытаются разобраться в проблемах с отступами, так и в разделе комментариев на моем YouTube-канале.

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

Отступы тоже кажутся простой вещью. Вы добавляете какой-нибудь margin и таким образом добавляете пустое пространство вокруг элемента. Но внезапно этот код начинает вести себя немного по-разному в разных ситуациях. Или вот, скажем, добавляете вы свойство margin-top элементу-потомку, а в результате родительский элемент ползет вниз.

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

Что такое margin?

Прежде чем двинуться дальше, я хотел бы удостовериться, что все мы знаем, что из себя представляют эти самые margin-ы!

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

MDN очень хорошо объясняет, что такое margin:

«Margin это самый внешний слой, окружающий контент, padding и border. Это пустое пространство между блоком, к которому margin относится, и другими элементами. Размер этого пространства контролируется свойством margin и его значениями».

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

Стили браузера (user-agent stylesheets)

Браузеры по умолчанию имеют удивительно большое количество CSS, т. н. user-agent stylesheets. Именно благодаря этим стилям элемент <h1> будет отображаться крупнее, чем <h2>, даже если в нашем документе никакого CSS не будет. И именно этим стилям мы обязаны тем, что у элемента <body> есть свойство margin, которое нам приходится постоянно удалять.

Эти стили имеют большое значение, но при этом их наличие приводит к одной из самых больших проблем в использовании внешних отступов. Дело в том, что по умолчанию не все наши элементы имеют нулевые margin-ы, и, как мы вскоре узнаем, это приводит к разнообразным и странным проблемам.

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

По умолчанию для левого и правого внешнего отступа текстового элемента установлено нулевое значение, а вот для margin-top и margin-bottom — нет.

Я часто говорю людям, что эти дефолтные значения сверху и снизу, если брать грубо, такие же, как font-size элемента. Это верно для абзацев, а также заголовков от <h3> до <h6>. Для <h1> это 0.67em, а для <h2> — 0.83em.

Все вышесказанное означает, что между нашими элементами на странице существует пустое пространство, даже если явно мы отступов не задавали.

К дефолтным значениям мы еще вернемся.

Схлопывание внешних отступов

Схлопывание отступов часто бывает причиной головной боли.

Когда у двух элементов есть вертикальные внешние отступы, соприкасающиеся друг с другом, они комбинируются в единый отступ.

Это само по себе странное поведение, но добавьте к этому еще и тот факт, что речь идет исключительно о вертикальных отступах (верхнем и нижнем). Это часто путает и раздражает людей.

Увидеть все это в действии можно на следующем примере:

Чтобы проиллюстрировать происходящее, в нашем примере класс .links добавлен к последнему абзацу (<p содержит в себе две ссылки.

Когда люди делают что-то подобное, они ожидают, что отступ между средним абзацем и ссылками будет равен 80px (40px + 40px), но в итоге оказывается, что он равен 40px. Два внешних отступа соприкасаются, а потому комбинируются в один отступ (схлопываются).

Чтобы эффект стал еще заметнее, давайте установим значение margin-bottom элемента <p> в 100px:

Опять же, два отступа не просто складываются, они схлопываются в один отступ шириной в 100px.

И это хорошо

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

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

Но хорошо это не всегда

Но схлопывание отступов приводит к путанице, когда margin-top первого потомка внутри элемента схлопывается с родительским margin-top.

Давайте еще раз посмотрим на наш скриншот:

Между верхом зоны просмотра и черным блоком есть пробел. И это не из-за body (потому что пробел гораздо больше отступа в 8px, который обычно бывает у body).

Угадайте, откуда появился этот отступ?

На самом деле это отступ элемента <h1> вверху черного блока.

Помните, я говорил, что стили браузера способны приводить к странным проблемам?

Чтобы пояснить, что конкретно здесь происходит, давайте зададим существенно больший margin-top заголовку h1.

Я постоянно вижу, как люди пытаются опустить заголовок внутри его родителя. Но вместо ожидаемого поведения мы получаем гигантский отступ сверху всего блока!

Это происходит потому, что margin-top заголовка <h1> схлопывается с margin-top родительского элемента.

В этом случае ничто не разделяет верх элемента-потомка и элемента-родителя. Поэтому, когда мы добавляем margin-top элементу-потомку, он соприкасается с родительским margin-top. А как мы уже знаем, соприкасающиеся внешние отступы комбинируются в один отступ.

Таким образом, когда мы задаем margin элементу-потомку, он применяется к родительскому элементу.

Вот почему люди ненавидят CSS.

Аналогично, в приведенном выше коде мы задали всем абзацам margin-bottom. Этот отступ у элементов p.link соприкасается с margin-bottom элемента .card, а значит, отступы комбинируются, и margin влияет не на ссылки, а на элемент .card.

Хотя в настоящее время это не приводит ни к каким проблемам на созданном нами сайте, они могут возникнуть в будущем, когда мы решим добавить другие элементы на страницу.

Дело в использовании margin не по назначению

Если мне нужно пространство между элементом .card и потомками внутри него, мне, прежде всего, вообще не стоит использовать margin.

Новички часто путают margin и padding. У меня есть правило на этот случай. Если вам нужно пустое пространство, используйте margin. Если вам нужно больше фона, используйте padding.

В нашем случае мы хотим, чтобы у элемента .card было больше фона. Поэтому нам не следует добавлять margin для потомка. Вместо этого нам нужно добавить padding для самого элемента .card.

На картинке хорошо видно, где padding, а где margin. У заголовка <h1> сверху по-прежнему есть margin, но он больше не сливается с отступом .card, потому что в качестве буфера добавлен padding. Это не дает внешним отступам .card и <h1> соприкоснуться.

Поскольку padding дает достаточное расстояние между абзацами <p> и заголовками <h1>, мы можем удалить добавленные ранее внешние отступы.

Внешние отступы схлопываются не всегда

В схлопывании внешних отступов есть исключения. Прямые потомки родителей grid и flex не имеют схлопывающихся отступов.

Но есть возможность это обойти — и мы возвращаемся к стилям браузера, а которых уже говорили ранее.

Есть простой способ вообще забыть о схлопывании внешних отступов

Прежде всего, напомню о своем правиле выбора между внешним и внутренним отступом:

• Если вам нужно пустое пространство, используйте margin.
• Если вам нужно больше фона, используйте padding.

Это правило в большинстве случаев поможет вам избежать проблем. Но давайте добавим еще одно правило (оно даже еще полезнее):

• Старайтесь вообще не использовать margin-top, за исключением случаев, когда это действительно необходимо.

Это правило немного конфликтует со стилями браузера, которые устанавливают margin-top и margin-bottom целому ряду элементов. Вот поэтому я часто делаю так:

Это устраняет большое количество проблем, связанных с самовольным схлопыванием внешних отступов, а также с различиями в макете, когда где-то используется flex или grid, а где-то — нет.

(Примечание: если вы проверите код на freeCodeCamp, вы увидите, что они тоже поступают подобным образом!)

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

Как сделать отступ между ссылками в css

В программном обеспечении для обработки текстов вы можете добавить в документ множество интервалов или вкладок, а интервал будет отображаться в отображении содержимого документа. Это не относится к HTML или страницам. Таким образом, изучение того, как белое пространство действительно обрабатывается браузерами, очень важно.

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

Синтаксис CSS padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin:

Этот код задает отступы во всех направлениях: сверху, снизу, слева и справа. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

10px — отступ сверху;
20px — отступ справа;
30px — отступ снизу;
40px — отступ слева.

Также можно установить margin left HTML и другие направления отдельно:

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Синтаксис свойства CSS padding

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

Для каждого направления одиночным объявлением:

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent разные значения аргументов, мы можем изменять величину отступа текста:

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

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

Почему кто-то использует вкладки

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

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

Видео обзор по теме HTML отступ текста

Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px, а для заголовка второго уровня отступ сверху 20px и снизу 10px, а для всех параграфов зададим отступ сверху 10px.

h2 margin-top: 24px;
margin-bottom: 12px;
>

Использование CSS для создания вкладок и интервалов HTML

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

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

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

Поля, отступы и текст-отступ

Наиболее распространенные способы создания интервала с CSS — это использование одного из следующих стилей CSS:

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

Этот абзац теперь будет иметь отступ в 5 символов

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

Перемещение текста более одного места без CSS

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

Например, если вы хотите переместить свое слово на пять пробелов, вы можете добавить следующее перед словом.

В оформлении веб-страниц это встречается не так часто, но все же встречается и для того чтобы закрыть эту потребность вам нужно знать лишь одно свойство text-indent: 10%; которое я применю к следующему абзацу при помощи этого кода:

CSS урок 10. Отступ и граница элемента CSS

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

Внешние отступы

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

Свойство:

• margin-bottom (нижний отступ)
• margin-left (отступ слева)
• margin-right (отступ справа)
• margin-top (верхний отступ)

Значения:

• auto
• величина: px или em
• %

Краткая запись:

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

Пример:

</style></head> <body> <div> Агния Барто — стихи <p> Я на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> .

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Внутренние отступы

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

Свойства:

• padding-bottom (нижний отступ)
• padding-left (отступ слева)
• padding-right (отступ справа)
• padding-top (верхний отступ)

Значения:

• auto
• величина: px или em
• %

Краткая запись:

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

Пример:

</style></head> <body> <p> Я на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> .

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border .

border-style (стиль границы)

Значения:

• none (без границы)
• dotted (из точек)
• dashed (пунктирная)
• solid (сплошная)
• double (двойная)
• groove (трехмерная)
• ridge (трехмерная)
• inset (трехмерная с тенью)
• outset (трехмерная с тенью)

Пример:

border-width (ширина границы)

Значения:

• thin (тонкая)
• medium (средняя)
• thick (толстая)
• значение

Пример:

</style></head> <body> <p на уроке в первый раз.<br/> Теперь я ученица.<br/> Вошла учительница в класс,-<br/> Вставать или садиться?<br/> </p> <p надо парту открывать,<br/> Не знала я сначала,<br/> И я не знала, как вставать,<br/> Чтоб парта не стучала.<br/> </p>

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

• red (цвет)
• rgb(255,0,0) (в системе rgb)
• #ff0000 (в шестнадцатиричной системе)
• transparent (прозрачная)

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

border:border-width border-style border-color; border: 1px solid #000;

Внешние границы (outline)

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

outline-color (цвет)

Значения:

• red (цвет)
• rgb(255,0,0) (в системе rgb)
• #ff0000 (в шестнадцатеричной системе)
• invert (инвертированный, противоположный)

outline-width (ширина)

Значения:

• thin (тонкая)
• medium (средняя)
• thick (толстая)
• значение

outline-style (стиль границы)

Значения:

• none (без границы)
• dotted (из точек)
• dashed (пунктирная)
• solid (сплошная)
• double (двойная)
• groove (трехмерная)
• ridge (трехмерная)
• inset (трехмерная с тенью)
• outset (трехмерная с тенью)

Краткая запись:

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

Результат:

Двойная рамка с использованием CSS

Пример:

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

yan21

Помогите плиз! Ушёл человек который занимался сайтом. Руководство дало задачу внести кое какие изменения в сайт. Я внёс. Но произошли изменения которые я не знаю как исправить. А именно:
как увеличить расстояние между ссылками, если они идут списком? Спасибо!

Fanamura

yan21,
в css шаблона:
a:link <
line-heigth:20px;
>
значение 20px меняем на нужное