shape-margin

Определение и применение

Свойство shape-margin увеличивает расстояние между формой обтекания плавающего элемента и соседним текстом. Оно помогает не прижимать строки вплотную к кругу или сложному силуэту, заданному через shape-outside.

Как отделить текст от контура плавающего изображения — в уроке «Плавающие элементы и обтекание текстом в CSS».

Попробуйте значения shape-margin

Увеличивайте расстояние между круглой формой обтекания и текстом. Размер самого круга не меняется.

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

shape-margin: 0

HTML и CSS примера
HTML
<div class="stage">
  <div class="demo-target">Фото</div>
  <p>
    Тони гуляет по парку, приносит мячик и отдыхает в тени деревьев. Рядом с
    фотографией строки следуют форме обтекания. Меняйте значение и сравнивайте
    начало каждой строки. Тони гуляет по парку, приносит мячик и отдыхает в тени
    деревьев. Рядом с фотографией строки следуют форме обтекания. Меняйте
    значение и сравнивайте начало каждой строки.
  </p>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  display: flow-root;
  font-size: 14px;
}
p {
  margin: 0;
}
.demo-target {
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  border-radius: 50%;
  background: #9bd3ec;
  color: #173b52;
  text-align: center;
  padding-top: 45px;
  shape-outside: circle(50%);
  shape-margin: 0;
}

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

Спецификация: CSS shapes

Поддерживается во всех основных браузерах с 2020 года.

Показать браузеры
Совместимостьcss.properties.shape-margin
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
shape-margin✓37✓79✓62✓24✓10.1✓37✓62✓24✓10.3✓3.0✓37✓10.3

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
shape-margin: <length-percentage [0,∞]>;

/* Глобальные значения */
shape-margin: initial | inherit | unset | revert | revert-layer;

<length-percentage [0,∞]> — длина или процент не меньше нуля.

JavaScript синтаксис:

JavaScript
element.style.shapeMargin = "16px";

Начальное значение свойства

0.

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

Значения shape-margin
Значение Описание
<length> Равномерное расширение формы наружу, например 12px или 1rem.
<percentage> Расстояние в процентах от строчного размера содержащего блока. Это не процент радиуса круга или ширины самой картинки.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства shape-margin устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Почему большой отступ перестаёт расти

Расширенная форма ограничивается областью внешних отступов плавающего элемента. Если места вокруг формы нет, увеличение shape-margin может перестать отодвигать текст. Для пространства за рамкой картинки оставьте достаточный margin с нужной стороны.

margin участвует в блочной модели и ограничивает область плавающего элемента, а shape-margin расширяет именно контур обтекания. Он не создаёт внутренний отступ, не меняет размеры изображения и не заменяет shape-outside. Если элемент перестал быть плавающим или вокруг него нет строк, видимого эффекта не будет.

Спецификация

CSS Shapes — shape-margin.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: промежуточные значения рассчитываются плавно.

Примеры, попробуйте сами

Воздух между кругом и строками

Сравните 0, 12px и 24px. Затем задайте 80px: отступ ограничится доступной областью. Увеличьте правый margin, чтобы дать форме больше пространства.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
article {
    max-width: 30rem;
}
p {
    margin: 0;
}
.shape {
    background: #fde68a;
    border: 3px solid #92400e;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Воздух между кругом и строками</title>
  </head>
  <body>
    <article>
      <div class="shape" aria-hidden="true"></div>
      <p>
        На поляне Тони нашёл круглый камень. Вокруг него росли маленькие цветы. Он сделал запись в блокноте и продолжил
        путь. Солнце осветило тропу, и на земле стали хорошо видны следы лесных жителей. По дороге к озеру бурундук
        несколько раз останавливался, чтобы прислушаться к птицам.
      </p>
    </article>
  </body>
</html>
style.css
CSS
article {
    display: flow-root;
}
.shape {
    float: left;
    width: 120px;
    height: 120px;
    margin: 0 40px 20px 0;
    border-radius: 50%;
    shape-outside: circle(50%) border-box;
    shape-margin: 12px;
}