Как сделать отступ сверху элемента?
Нужно сделать отступ сверху заблюренного блока,который расположен на картинке в виде лица,как на фото Когда пытаюсь это сделать через margin,то он работает влево и вправо,сверху и снизу не работает Пример HTML
Пример CSS
.face-image < width: 268px; height: 206px; background: url(img/face.png); margin: 20px 0 0 0; >.blurred-block
Отслеживать
задан 26 фев в 19:27
19 4 4 бронзовых знака
Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете.
26 фев в 19:28
26 фев в 19:28
Уберите свои скриншоты и добавьте нормально код
26 фев в 19:33
Изменил фото кода на текст
26 фев в 19:38
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
У вас в примере классическое схлопывание margin родительского и дочернего элементов. Причина такого поведения обусловлена историческими аспектами.
Как сказал выше Евгений его можно пресечь, задав border или padding, отличные от нуля. Либо задать у родительского элемента overflow любое значение, отличное от дефолтного, например, auto. Либо установить свойство display в inline-block , что так же исключит создание излишних отступов:
.face-image < width: 268px; height: 206px; background: url(img/face.png); margin: 20px 0 0 0; display: inline-block; >.blurred-block
Есть и другие, более экзотеские способы, описанные в соответствующей ветке англоязычного so
CSS: Внешние отступы
Внутренние отступы позволяли добавить «воздуха» в блок и дать пространство между границей блока и его контентом. А как не дать двум соседним блокам прижиматься друг к другу?
Карточка с белым текстом на фиолетовом фоне
Карточка с белым текстом на фиолетовом фоне
Чтобы отделить две карточки из примера выше используются внешние отступы. Их принцип работы схож с внутренними отступами, а меняется только направление. В плане свойств и их значений всё то же самое. Существует 4 правила и одно общее:
- margin-top — внешний отступ сверху
- margin-right — внешний отступ справа
- margin-bottom — внешний отступ снизу
- margin-left — внешний отступ слева
Для объединения значений используют свойство margin , в котором сохраняется порядок указания:
- отступ сверху
- отступ справа
- отступ снизу
- отступ слева
Также, как у внутренних отступов, для удобства существуют сокращённые записи этих правил:
- Если указать только одно значение, то оно будет использовано одновременно для всех сторон
- Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
- Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу
.card
Карточка с белым текстом на фиолетовом фоне
Карточка с белым текстом на фиолетовом фоне
Задание
Добавьте в редактор с классом margin и установите внешние отступы в 20 пикселей со всех сторон. Стили запишите в теге . Используйте сокращённую запись
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
CSS: Внутренний и внешний отступ
Внутренний отступ — пустое пространство между содержимым элемента и его рамкой (если она установлена). Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding.
Внешний отступ — пустое пространство, отделяющее элемент от других элементов или краев окна браузера. Для добавления и управления шириной внешних отступов со всех четырех сторон элемента используется свойство margin.
Свойства padding и margin могут принимать от одного до четырех значений:
padding: 10px 15px 22px 18px; margin: 10px 15px 22px 18px;
Где значения устанавливаются по часовой стрелке, начиная с верхнего:
Если у свойств указать всего одно значение, то отступы со всех сторон будут одинаковой ширины.
На первый взгляд видимый эффект при использовании данных свойств выглядит одинаковым, чтобы заметить визуальную разницу между ними, можно например установить рамку для элемента или задать задний фон:
Название документа Обычный абзац.
Для отступов, так же как и для рамок, есть свойства позволяющие управлять размером отступа с каждой стороны отдельно. Внутренние отступы регулируются свойствами: padding-top, padding-right, padding-bottom и padding-left. Внешние отступы регулируются свойствами: margin-top, margin-right, margin-bottom и margin-left.
Примечание: значения свойств padding и margin не наследуются дочерними элементами, поэтому нужно указывать ширину отступов отдельно для каждого элемента, которому они необходимы.
С этой темой смотрят:
- Блочная модель CSS
- CSS рамки
- Ширина и высота элемента
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Как задать внешний отступ в css
Свойства CSS margin используются для создания пространства вокруг элементов вне любых определенных границ.
С помощью CSS вы имеете полный контроль над полями. Существуют свойства для настройки поля для каждой стороны элемента (сверху, справа, снизу и слева).
Маржа-отдельные стороны
CSS имеет свойства для указания поля для каждой стороны элемента:
- margin-top
- margin-right
- margin-bottom
- margin-left
Все свойства полей могут иметь следующие значения:
- Auto-обозреватель вычисляет маржу
- length — определяет поле в пикселах, PT, cm и т. д.
- % — задает поле в% от ширины содержащего элемента
- Наследование-указывает, что поле должно быть унаследовано от родительского элемента
Совет: Допустимы отрицательные значения.
В следующем примере устанавливаются различные поля для всех четырех сторон элемента
:
Пример
Маржа-Сокращенное свойство
Чтобы сократить код, можно указать все свойства полей в одном свойстве.
Свойство margin является сокращенным свойством для следующих свойств отдельных полей:
- margin-top
- margin-right
- margin-bottom
- margin-left
Итак, вот как это работает:
Если свойство margin имеет четыре значения:
- margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
Пример
Если свойство margin имеет три значения:
- margin: 25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
Пример
Если свойство margin имеет два значения:
- margin: 25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
Пример
Если свойство margin имеет одно значение:
- margin: 25px;
- all four margins are 25px
Пример
Значение Auto
Можно задать для свойства Margin значение auto для горизонтального центрирования элемента в его контейнере.
Затем элемент будет занимать заданную ширину, а оставшееся пространство будет равномерно распределено между левым и правым полями:
Пример
Наследуемое значение
В этом примере левое поле элемента
наследуется от родительского элемента ():
Пример
Свернуть маржи
Верхние и нижние поля элементов иногда сворачиваются в одно поле, равное самому большому из двух полей.
Это не происходит на левом и правом полях! Только верхние и нижние поля!
Посмотрите на следующий пример:
Пример
В приведенном выше примере элемент имеет нижнее поле 50px, а элемент имеет верхний предел, установленный в 20px.
Здравый смысл, казалось бы предположить, что вертикальное поле между и будет в общей сложности 70px (50px + 20px). Но из-за краха маржи, фактические маржа заканчивается время 50px.
Внешние и внутренние отступы
Продолжаем изучение уроков CSS. В этом уроке мы затронем тоже очень важную тему — тему отступов. Припомним основное: каждый элемент html-страницы — это индивидуальный блок, имеющий свои границы (рамки).
Для примера возьмем абзац из предыдущего урока и в стилях пропишем ему ширину в 500px:
border-bottom:2px solid #000000;
border-left:1px dotted green;
border-right :1px dotted green;
border-top:1px solid gray;
станет шириной в 500px. Как мы видим, абзац такой же блочный элемент.
Теперь перейдем непосредственно к отступам. Отступы есть внешние и внутренние.
Внешний отступ — расстояние от границы элемента страницы (border) до соседнего элемента.
Внутренний отступ — расстояние от границы элемента (border) до содержимого этого элемента (например текста).
За величину внешнего отступа отвечает свойство margin
margin -top — верхний внешний отступ
margin-right — правый внешний отступ
margin-bottom — нижний внешний отступ
margin-left — левый внешний отступ
margin — внешний отступ со всех сторон (краткая запись)
border-bottom:2px solid #000000;
border-left:1px dotted green;
border-right :1px dotted green;
border-top:1px solid gray;
Для сокращения записи можно использовать краткую запись свойства margin :
CSS: Внешние отступы
Внутренние отступы позволяли добавить «воздуха» в блок и дать пространство между границей блока и его контентом. А как не дать двум соседним блокам прижиматься друг к другу?
Чтобы отделить две карточки из примера выше используются внешние отступы. Их принцип работы схож с внутренними отступами, а меняется только направление. В плане свойств и их значений всё то же самое. Существует 4 правила и одно общее:
- margin-top — внешний отступ сверху
- margin-right — внешний отступ справа
- margin-bottom — внешний отступ снизу
- margin-left — внешний отступ слева
Для объединения значений используют свойство margin , в котором сохраняется порядок указания:
- отступ сверху
- отступ справа
- отступ снизу
- отступ слева
Также, как у внутренних отступов, для удобства существуют сокращённые записи этих правил:
- Если указать только одно значение, то оно будет использовано одновременно для всех сторон
- Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
- Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу
Задание
Добавьте в редактор с классом margin и установите внешние отступы в 20 пикселей со всех сторон. Стили запишите в теге . Используйте сокращённую запись
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы отловить этот момент, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Параметры отступов в CSS
Здравствуйте, в этой статье мы рассмотрим механизмы и команды с помощью которых мы сможем задавать отступы для всех элементов нашей страницы. В CSS есть два вида отступов это внешний и внутренний отступ и применение их на практике поможет каждому структурировать свой сайт и создавать на нем нужные параметры. Ну что же приступим к изучению и начнем с внутреннего отступа.
padding-внутренний отступ.
Для того чтобы можно было задать внутренний отступ на сайте есть целый ряд команд, позволяющих задавать отступ с конкретной стороны.
Для того чтобы задать отступ слева нужно применить команду padding-left и указать размер в одной из величин которые приняты в CSS и чаще всего это пиксели.
padding-left:17px;
Отступ справа задается командой padding-right и также само указываете конкретную цифру в одном из принятых единиц измерения.
padding-right:22px;
Для того чтобы задать внутренний отступ сверху нужно применить команду padding-top и указать размер в принятых величинах.
padding-top:20px;
Для задания отступа снизу блока нужна команда padding-bottom с размером.
padding-bottom:25px;
Для того чтобы сократить размер записываемого кода то нужно применить команду padding и сейчас я покажу как это можно сделать.
В данной записи я указал для всех краев отступ в десять пикселей. В данной записи первое значение задает размер сверху, второе справа, третье снизу и четвертое значение слева.
Также можно задать не все значения а только два и тогда первое значение отвечает за отступ сверху и снизу а второе слева и справа.
Пример:padding:10px 20px;
Также можно задать только три значения и тогда первая цифра отвечает за отступ сверху, второе за отступ слева и справа а третье-отступ снизу. Все эти варианты помогут вас существенно сократить размер файла стилей и вам самому будет проще разобраться в нем.
Атрибут стиля margin.
Для того чтобы задать внешний отступ между блоками нам нужно воспользоваться атрибутом стиля margin и сейчас мы посмотрим как все это можно выполнить. Данный атрибут очень похож на предыдущий и с одной только разницей что задает внешний отступ.
Для задания верхнего отступа нам понадобится команда margin-top и вот как это выглядит на практике.
Теперь определенный нами элемент будет иметь верхний отступ от соседних блоков на десять пикселей.
Для отступа снизу мы применим атрибут margin-bottom и укажем точный размер. Например для того чтобы задать нижний отступ на двадцать пикселей нам нужно добавить следующую команду:
Отступы слева и справа задаются командами margin-left и margin-right соответственно и для этого нам понадобится следующий код:
Для отступа слева на семнадцать пикселей: margin-left:17px;
И для отступа справа на тот же расстояние: margin-right:17px;
Также как и в предыдущем примере вы можете сократить запись записав просто margin и указав по порядку все параметры через пробел. Примерно так:
margin:10px 17px 20px 17px;
И также само задает первое значение отступ сверху, справа, снизу и слева соответственно.
Теперь давайте посмотрим как это все выглядит на практике. Для примера давайте возьмем каркас с статьи про блоки в CSS. Давайте для начала мы заполним блок основного контента текстом произвольного содержания.
Теперь мы видим что текст прилип непосредственно к границам блока и это выглядит не очень красиво и сейчас мы это исправим при помощи внутреннего отступа. Пропишем в файл стилей следующую команду:
Давайте теперь разберемся что мы написали. Точка перед словом content означает что мы задаем параметр для классов а content это название нашего класса. Ну а в скобках мы указываем команду а через двоеточие параметры отступов. На практике это выглядит так:
Как мы видим у нас получилась рамка размером в двадцать пикселей.
Теперь чтобы показать как работает параметр margin зададим для все того же блока отступы от остального содержимого.
После применения этих стилей наш блок будет отделен от остальных контейнеров на определенное расстояние.
На этом статья закончена и я думаю что вам теперь понятно как нужно применять на практике параметры стилей padding и margin и вы сможете задать отступ для любого блока и элемента на своей странице.
Похожие публикации:
- Как подключить webkit css
- Как подключить наушники mi true wireless ebs basic 2
- Как подключить шрифты в css font face
- Как позиционировать картинку в css