Noborder nolink nopadding: использование внутренних и внешних отступов / Блог компании RUVDS.com / Хабр

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

Делаем вашу страницу интересной и стимулируем подписчиков почаще заглядывать к вам на страницу или на сайт за покупками

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Вики-разметка — это инструмент форматирования текста в публикациях ВКонтакте.

Этот инструмент расширяет возможности форматирования текста. Он позволяет создать в группе или паблике навигационное меню с кнопками, игры, учебник. Страницы, отредактированные таким образом привлекают внимание, структурируют информацию и делают ее удобной для пользователя. Вместо сплошного информационного полотна, вы получаете полноценный материал с графическими элементами: таблицами, видео, изображениями.

Подробней о вики-разметке ВКонтакте

Статьи, оформленные таким образом легко читать, они красиво выглядят и помогают индексации в поисковых системах. Это одно из главных преимуществ – такие тексты часто попадают в топ выдачи, если их оптимизировать.

Что еще вы можете делать с подобным контентом:

• Распространять как гостевые публикации и привлекать трафик.
• Выделять отдельные слова, фразы, делать отступы и заголовки.
• Проставлять ссылки на нужные страницы или определенный абзац, предложение в этом материале.
• Создать кнопки, призывающие подписаться на ресурс или поделиться постом.

Пример статьи

Меню и игры

Wiki-язык позволяет осуществить удобную графическую навигацию посетителей группы. Также с его помощью разрабатывают простые квесты. Например, «Выход».

Как сделать вики разметку

Существуют приложения для быстрого и простого конструирования страниц. В список этих сервисов входят:

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

Как создать публикацию самостоятельно

Сначала нужно открыть в группе материалы. Для этого зайдите в управление, выберите «Разделы» и подключите этот пункт. Затем перейдите обратно в сообщество. Вам понадобится id страницы. Это цифры из адресной строки после слова club.

Далее используйте ссылку http://vk.com/pages?oid=-*******&p=Имя. Замените на нее адрес сообщества. Вместо звездочек вставьте свой id, а имя замените на название раздела. Обратите внимание, что изменять его будет нельзя. Можно писать на русском языке, с пробелами и цифрами.

Нажмите «Наполнить содержанием», откроется редактор. Теперь вам снова понадобится адрес. В этот раз важно скопировать первую его часть, до «?act…».

Обязательно сохраните ее в отдельном документе. Так как страница еще не закреплена, вы ее потеряете.

Перейдите в режим разметки, нажав значок <> справа. В нем больше функций и он работает без ошибок. Здесь ничего сложного. Оформите подзаголовки, абзацы, расположите фото так как вам нравится. Для этого можно использовать панель инструментов или теги:

• <b><b/>– полужирный шрифт.
• <i></i>– курсив.
• <u></u>– подчеркивание.
• [] – ссылка.

Проверьте статью. Внизу есть кнопка предпросмотр, с ее помощью вы увидите недочеты.

Затем сделайте публикацию видимой для подписчиков. Для этого ссылку, которую вы скопировали ранее, оставьте на стене сообщества, кликните по трем точкам справа и выберите «Закрепить».

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

Меню

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

Чтобы поделить фото на элементы, воспользуйтесь сервисом IMGonline. Скачайте их и загрузите в редактор. Не забудьте нажать <>. Если вы хотите объединить их так, чтобы между ними не было границ, впишите к каждой nopadding. После этого слова добавьте ссылку на раздел, в который ведет кнопка.

Сохраните результаты и прикрепите их на стену сообщества (от имени группы), в настройках закрепите ее. Подберите картинку. Меню также оформляется в приложениях вики разметки.

Таблицы

На wiki-страницах их создают с помощью различных кодов. Их можно сделать самостоятельно или найти готовый шаблон. Каждая матрица открывается символами «{|» , а закрывается «|}».

Другие знаки:

• |- – начало новой строки. Ставится после {|.
• | – простая ячейка.
• ! – ячейка с выделенным, центрированным текстом.
• |+ – заголовок по центру.

Также в построении часто используются теги (всегда прописываются после первого знака):

• Noborder – отсутствие видимых рамок.
• Nomargin – увеличивает таблицу на ширину материала.
• Nopadding – уменьшает отступы в ячейках.
• Fixed – фиксирует ширину.

Пример.

Коды вики разметки

Так выглядят заголовки, отступы, списки, разделительная линия и подпись на wiki- языке и в чистовом варианте.

Такие публикации – непривычный и сложный инструмент для новичков. Бывает так, что вы все делаете правильно, но ничего не получается. Чтобы избежать ошибок, придерживайтесь трех правил:

• Не оформляйте контент в визуальном редакторе. Из-за переключения на этот режим сбиваются настройки: пропадают теги, сбивается размер картинок.
• е добавляйте в названия лишние знаки: «+», «_». Они подвергаются перекодировке, в результате которой может сломаться меню.
• Сокращайте длинные ссылки с помощью вот этого сервиса. Домен первого уровня должен быть не более 6 символов.

Вики-разметка – это не простой, но эффективный способ продвижения и развития сообщества ВКонтакте. Чтобы упростить работу с инструментом, используйте приложения. В некоторых из них публикация буквально в несколько шагов. На сайте VK представлен объемный учебник, в котором рассмотрены все вопросы, связанные с wiki-языком.

Разбираемся с внешними отступами в CSS

Перевод статьи «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. Именно благодаря этим стилям элемент <h2> будет отображаться крупнее, чем <h3>, даже если в нашем документе никакого CSS не будет. И именно этим стилям мы обязаны тем, что у элемента <body> есть свойство margin, которое нам приходится постоянно удалять.

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

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

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

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

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

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

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

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

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

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

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

p {
  font-size: 18px;
  margin-bottom: 40px;
}

.links {
  margin-top: 40px;
}

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

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

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

p {
  font-size: 18px;
  margin-bottom: 100px;
}

.links {
  margin-top: 40px;
}

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

И это хорошо

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

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

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

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

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

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

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

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

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

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

.card {
  background: #000;
  color: white;
  width: 560px;
  margin: 0 auto;
}

h2 {
  font-size: 24px;
  margin-top: 100px;
}

p {
  font-size: 18px;
  margin-bottom: 100px;
}

.links {
  margin-top: 10px;
}

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

Это происходит потому, что margin-top заголовка <h2> схлопывается с 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. У заголовка <h2> сверху по-прежнему есть margin, но он больше не сливается с отступом .card, потому что в качестве буфера добавлен padding. Это не дает внешним отступам .card и <h2> соприкоснуться.

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

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

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

/Закатывает глаза/

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

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

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

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

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

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

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

h2,
h3,
h4,
h5,
h5,
h6,
p,
ul,
ol {
 margin: 0 0 1em 0;   
}

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

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

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

Фотографии в wiki-разметке

Как получить код фотографии?

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

где XXX — идентификатор пользователя или группы, YYY — номер фотографии.

Пример: Скопируем конструкцию у фотографии пользователя и фотографии в сообществе.

Откроем любую фотографию пользователя и скопируем нужную конструкцию (photo27440897_373145651).

Откроем любую фотографию в сообществе и скопируем нужную конструкцию (photo-38309255_456239021).

Как вставить фотографию в wiki-страницу?

После того, как мы скопировали конструкции фотографий, нам необходимо вставить их в wiki-страницу. сделать это можно, заключив конструкции в квадратные скобки:

[[photoXXX_YYY]] или [[photo-XXX_YYY]]

Обратите внимание: коды для фотографий сообществ и пользователя различаются по написанию.

Параметры для фотографий

Всего к фото доступно 8 параметров, некоторые из которых совмещать не стоит по той или иной причине.

Пример: при использовании параметра nopadding пропадает смысл в параметре noborder. Также, используя plain с любым из параметров, мы получаем функцию, перекрывающую любую другую и т.д.

Привязка ссылок к фотографиям

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

Ссылка к фото прописывается на месте слова «link» следующего шаблона:

[[photo-XXX_YYY|parameters|link]]

Ниже приведены варианты написания адресов ссылок на некоторые внутренние и внешние ресурсы через фотографии.

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Теги: wiki-разметка.

display | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

Синтаксис

display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>display</title>
  <style>
   .example {
    border: dashed 1px #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Шрифт текста */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы вокруг */
   }
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер текста */
    margin: 0; /* Убираем отступы вокруг */
    white-space: nowrap; /* Отменяем переносы текста */
   }
  </style>
 </head> 
 <body> 
  <p>Пример</p>
  <p>
  &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Формула серной кислоты:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

[window.]document.getElementById(«elementID»).style.display

Браузеры

Internet Explorer до версии 7 включительно:

• поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
• для элементов <li> понимает значение block как list-item;
• значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

• значение table-column применяется только для тега <col>;
• значение table-column-group поддерживается только для тега <colgroup>.

Chrome 2.0, а также Safari версии 3 и старше, iOS:

• значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

• Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

text-decoration | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink

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

line-through

Создает перечеркнутый текст (пример).

overline

Линия проходит над текстом (пример).

underline

Устанавливает подчеркнутый текст (пример).

none

Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

inherit

Значение наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
   a { 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover { 
    text-decoration: underline; /* Добавляем подчеркивание 
                                   при наведении курсора мыши на ссылку */
   }
  </style> 
 </head> 
 <body>
  <p><a href="1.html">Стратегическое нападение</a></p>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID»).style.textDecoration

[window.]document.getElementById(«elementID»).style.textDecorationBlink

[window.]document.getElementById(«elementID»).style.textDecorationLineThrough

[window.]document.getElementById(«elementID»).style.textDecorationNone

[window.]document.getElementById(«elementID»).style.textDecorationOverLine

[window.]document.getElementById(«elementID»).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

padding | CSS справочник

Поддержка браузерами

Описание

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

Свойство padding обеспечивает краткий метод установки значений сразу нескольких свойств внутреннего отступа в одном объявлении. Оно может содержать от одного до четырех значений, разделяемых между собой пробелами. Если указывается более одного значения, внутренний отступ устанавливается начиная с верхней позиции:

Визуальный эффект зависит от количества заданных значений:

Отрицательные значения внутренних полей не допускаются.

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

Примечание: для установки внутренних полей отдельно для каждой стороны элемента, используйте следующие свойства: padding-top, padding-bottom, padding-left, padding-right.

Синтаксис

padding: [размер | проценты] {1 ... 4} | inherit;

Значения свойства

Пример

Padding задает отступ между контентом и границей элемента.

div#myBox {
background-color: yellow;
width: 100px;
padding: 0px;
}

CSS Padding

Этот элемент имеет отступ 70 пикселей.

  прокручиваемым