Следующая статья поможет вам: Чем они отличаются и как их использовать
Создание действительно потрясающего интернет-магазина сводится к множеству мелочей — всех единиц и нулей, которые определяют функциональность, структуру и внешний вид каждой страницы.
Существует скользящая шкала ноу-хау кодирования, которая охватывает различные аспекты создания и работы сайта — от тех, кто не может отличить код от греческого, но может держать свой собственный на панели инструментов, до тех, кто может возиться с HTML и CSS, чтобы настроить некоторые ключевые визуальные эффекты для тех гуру полного стека, которые продвигают все важные изменения, которые заставляют мир вращаться.
Когда-то понимание кода было необходимо для создания сайта.
В наши дни, когда существует так много инструментов с низким кодом и без него, гораздо проще создавать красивые магазины без помощи разработчиков.
Хотя вы не пишете код напрямую, вы все равно меняете все единицы и нули, чтобы все это произошло. Посмотри, какой ты могучий!
Теперь вам просто нужно понять основные концепции, чтобы внести эти значимые изменения на страницы вашего магазина. Например, как поля и отступы.
Эти концепции стилей CSS имеют некоторые сходства, но то, как они изменяют внешний вид элементов вашей страницы, сильно различается.
В этом посте мы рассмотрим:
Начнем с описания того, чем они отличаются друг от друга.
В чем разница между margin и padding?
От центра к краям каждый элемент страницы состоит из содержимого, заполнения, границы и поля. Как вы можете видеть ниже, граница разделяет отступы и поля.
Хотя и margin, и padding описывают расстояние от границы элемента, margin — это невидимое внешнее пространство, а padding — видимое внутреннее пространство.
Две страны, одна граница.
Скажи привет своей стихии
Каждый из них важен для создания легко читаемой страницы магазина. Чтобы еще больше различать их, давайте определим их отдельно.
Что такое прокладка?
Отступы — это пространство внутри элемента между содержимым и границей элемента.
Таким образом, если ваш элемент — это кнопка, отступы — это то, что гарантирует, что содержимое — «Начать строить бесплатно» в очень контекстном призыве к действию ниже — не будет плотно обрамлено границами указанной кнопки.
#cta-visual-pb#
Если бы не было отступов, эта кнопка выглядела бы явно неуклюжей.
С отступами с каждой стороны содержимого текст счастливо плавает в середине кнопки, приглашая вас щелкнуть по нему и узнать больше о создании собственного удивительного магазина.
Между этими двумя кнопками есть явный победитель
Когда вы увеличиваете размер отступа, вы увеличиваете размер блока внутри границы. По сути, размер содержимого (например, количество текста и размер его шрифта) плюс отступы равны общему размеру кнопки.
это дополнение
Что такое маржа?
По ту сторону границы, поле относится к пространству, окружающему элемент.
Он решает, где этот элемент будет располагаться в пространстве и по отношению к другим элементам вокруг него (как и поля других элементов).
Итак, для примера с призывом к действию, приведенного выше, если вокруг элемента кнопки (и текстового элемента над ним) не было полей, то текстовый блок располагался бы на границе кнопки.
Это не будет хорошо выглядеть.
Итак, вы добавляете поле к элементу кнопки и вы добавляете поле к текстовому div над ним. Размер используемой вами маржи увеличит размер контейнера, в котором все размещено.
Поскольку поле прозрачно, вы не можете видеть границы этого контейнера. Но эффект от ваших изменений будет очевиден.
это маржа
Бонус: отрицательная маржа
Точно так же, как вы можете отталкивать элементы друг от друга, устанавливая поля, вы также можете натягивать элемент на другой с отрицательным полем.
Таким образом, вместо поля в 20 пикселей внизу определенного элемента вы можете сделать -20 пикселей и позволить следующему элементу вторгаться в его северного соседа. Для этого есть причины, о которых мы кратко расскажем ниже.
Когда использовать поля и отступы
Хотя поля и отступы имеют схожие специальные возможности на страницах вашего магазина, они выполняют совершенно разные функции.
Как мы упоминали выше, заполнение изменит количество пространства между границей вашего элемента и содержимым внутри этой границы.
Итак, вы хотите использовать набивка чтобы дать тексту вашей кнопки или div некоторую передышку от границы. Это облегчает чтение, но также и выглядит лучше.
Это также сделает ваш видимый элемент больше.
Ты используешь допуск чтобы другие элементы не сталкивались с вашим видимым элементом (помните, поле прозрачно). Чтобы ваша кнопка не загромождала текст субтитров или наоборот, дайте одному или обоим немного поля, чтобы разделить их.
Это создает больше пробелов на ваших страницах, помогая создать лучший пользовательский опыт для ваших покупателей.
Однако иногда вам может понадобиться, чтобы элемент вторгся в пространство другого элемента. Это отрицательная маржа.
Когда вы хотите, чтобы определенный элемент перекрывался с другим, это тот момент, когда вам нужно сделать отрицательное значение поля.
Чтобы это произошло, вам нужно применить отрицательное поле к элементу, который вы хотите перекрыть. Затем следующий элемент перелезет через этот элемент.
При правильном использовании он может создать художественный визуальный эффект для частей вашего магазина.
Такой вычурный с моей отрицательной маржой
Наконец, вы можете сделать свой граница подразумевается (без линии), вы можете увеличить его размер, чтобы он стал силой, с которой нужно считаться (очень толстая линия), или вы можете сделать его пунктирной или пунктирной линией (если вам это нравится).
Некоторые элементы хорошо работают с определенной рамкой, в то время как другим (например, кнопкам) нужно только добавить радиус границы, чтобы скруглить углы и смягчить этот призыв к действию.
Поздоровайтесь с блочной моделью CSS
Чтобы получить более полное представление о пространстве, в котором вы работаете, давайте взглянем на блочную модель CSS.
Как вы можете видеть ниже, весь контейнер представляет собой многослойное дело, обслуживающее содержимое в середине. Это как нарезка шоколадного батончика, если вам нравятся сладкие аналогии.
Содержимое — центр нуги; набивка – орехово-карамельная; окантовка – шоколадная скорлупа; а поле — это пустое пространство между шоколадным батончиком и оберткой.
Ладно, теперь я проголодался.
Визуализация этого может сделать все это намного проще для понимания. Аналогия с ним может только вызвать у вас слюнки.
Блочная модель CSS
Как изменить поля и отступы в CSS
Чтобы изменить поля и отступы для элементов страницы, перейдите в таблицу стилей и найдите класс элемента, который хотите изменить. Это будет выглядеть так:
.красивая-кнопка {
маржа: авто;
отступ: 10px 25px;
радиус границы: 4px;
цвет фона: #1a212a;
размер шрифта: 16px;
высота строки: 160%;
вес шрифта: 600;
}
Поля и отступы определяются для всех четырех сторон элемента сверху по часовой стрелке. Например, измерения отступов могут выглядеть в CSS следующим образом:
отступы сверху: 10px;
отступ справа: 25px;
отступ снизу: 10 пикселей;
отступ слева: 25px;
Более простой и короткий способ сделать это — перечислить его в том же порядке (вверху справа внизу слева) в одном свойстве:
отступ: 10px 25px 10px 25px;
И, чтобы еще больше сократить его, если у вас есть одинаковые измерения для верха и низа, левого и правого, просто перечислите два измерения, одно указывает верх/низ, а другое указывает право/лево:
отступ: 10px 25px;
Наконец, если все измерения одинаковы, просто включите одно:
отступ: 10 пикселей;
Обычно они измеряются в px, em или %.
Разница между этими измерениями заключается в том, что px — фиксированное значение, а em и % — условные, основанные на изменяющемся размере контента (вспомните мобильную отзывчивость).
Margin также может быть установлен на auto (как в приведенном выше примере), что будет центрировать элемент по горизонтали внутри его контейнера и эффективно обнулять верхнее и нижнее поля.
Как изменить поля и отступы в Shogun Page Builder
Если вы используете Page Builder для создания страниц своего магазина, вам повезло.
Очень просто играть с отступами и полями без необходимости возиться с кодом.
В довершение всего, вы можете видеть изменения на своей странице редактирования по мере их внесения. Таким образом, вы можете бесконечно экспериментировать и опубликовать свою страницу, когда доведете ее до совершенства.
На странице редактирования Page Builder просто нажмите на элемент, и вы увидите меню в правой части экрана. Нажмите на Стили вкладку вверху и прокрутите до Поля или Прокладка чтобы внести свои изменения.
Для каждого свойства вы можете изменить его в px, em или %. Для полей вы также можете установить его на авто.
Наконец, чтобы редактировать каждую единицу по отдельности, вы должны разорвать связь между верхом и низом, а также левым и правым. Это так же просто, как щелкнуть маленький значок цепочки в верхней части каждого раздела.
Выберите свою единицу измерения
Отмена связи свойств
Чтобы показать вам, как легко изменить эти свойства CSS, я приведу небольшой пример. Вот два элемента без полей:
Они толпятся друг против друга и делают раздел плохим. Чтобы исправить это в Shogun, я могу просто перейти к первому элементу и дать ему небольшое поле внизу.
Не хорошо
Намного лучше
И, вуаля. Это выглядит намного лучше, и эти две секции не все в пространстве друг друга.
Чтобы узнать больше о том, как использовать поля и отступы в Shogun Page Builder, ознакомьтесь с нашим простым руководством (в нем есть GIF-файлы!).
Поля и отступы влияют на то, как ваша страница выглядит на различных устройствах, поэтому вы можете легко переключаться между размерами экрана в редакторе, чтобы увидеть, как реагируют элементы.
В этой статье об адаптации мобильных устройств мы коснемся использования «автоматических» полей для адаптивного центрирования элементов и использования процентных значений по сравнению с пикселями для боковых полей и отступов для создания гибкого интервала.
Время настроить эти страницы
Теперь, когда у вас есть представление о том, на что способны эти CSS-мощные инструменты, используйте их, чтобы сделать ваш магазин суперкрутым.
Вы можете использовать CSS или просто сделать это весело и просто с помощью Shogun. Твой выбор!
Как бы вы это ни делали, теперь вы можете сказать, что знаете разницу между отступами и полями и хорошо представляете, когда их использовать на страницах вашего магазина.
#cta-visual-pb#