Что такое padding. Margin или padding? Размышления о том, что и где использовать. Установка margin и padding
Представьте себе сайт, на котором можно всё: общаться, узнавать новости и получать новые знания, смотреть фильмы и слушать музыку, играть в стратегии и головоломки, бронировать билеты, покупать технику, записываться на маникюр, получать консультации специалистов. Даже не переходя на соседнюю вкладку браузера, самым обыкновенным образом выполнять множество других вещей, которые мы делаем каждый день онлайн и офлайн.
Вы можете подумать, что такой сайт в состоянии заменить собой весь интернет. И будете правы. «ВКонтакте» уже определил для себя, что так будет практичнее и безопаснее для пользователей. И, безусловно, удобнее для бизнесов и всего многообразия представленных на нем сообществ.
Наверное, многие из вас уже заметили в некоторых группах «ВКонтакте» кнопки, приглашающие оставить заявку, заполнить анкету, купить билет. Официально запустив iFrame приложения в группах, «ВКонтакте» интегрирует на своей платформе функционал e-commerce сайтов и делает большой шаг навстречу тому, чтобы перестать быть просто соцсетью. Очевидно, что продажи через группы - не только новая удобная возможность для пользователей и многообещающее с коммерческой точки зрения решение для бизнесов, представленных в соцсети. Глобально, это стратегия «ВКонтакте» удержать аудиторию еще дольше, лишить её необходимости оставлять свои контакты и деньги на сторонних сайтах.
7 фактов о приложениях для сообществ:- Возможно три варианта видимости: приложения могут быть доступны только администраторам, только участникам сообщества или же каждому, кто откроет страницу группы.
- Текст сниппета (кнопки, которая появляется, если вы даете ссылку на приложение) нужно выбрать из предложенных.
- Произвольным текстом можно задавать название самого приложения, а также кнопки, которая будет побуждать пользователей перейти в него.
Кстати, с помощью статистики сообщества можно проанализировать, как тот или иной текст на кнопке влияет на переходы в приложение. Тестируйте разные варианты, чтобы посмотреть, какой из них сработает лучше. Разумеется, следует обратить внимание на то, что в рассматриваемый период посещаемость сообщества должна быть примерно одинаковой.
Мы составили руководство по авторизованным приложениям для сообществ. В нем мы систематизировали возможности каждого из 8 доступных на сегодня приложений в разрезе преимуществ для владельцев и аудитории, привели примеры бизнесов и некоммерческих групп, которым эти приложения будут полезны.
Скачать руководство в PDF-формате можно .
8 авторизованных приложений. Краткий обзор1. ВакансииПозволяет работодателям размещать любое количество вакансий и обрабатывать резюме от соискателей прямо во «ВКонтакте». Особенно удобно для компаний с большими штатами линейного персонала - сетей магазинов и ресторанов, крупных производств. (Чтобы разнести бренд и HR-бренд, крупные компании и холдинги обычно создают отдельные сообщества для сотрудников, например, «Работа в фирменных магазинах Adidas» и «Работа в AmRest» ).
Удобно, что компании могут сразу же оценить «моральный облик», бэкграунд, профессиональные и личные интересы кандидата, перейдя на его личную страницу. Удобно, что имеют возможность получать анкеты молодых кандидатов, ведь далеко не все из них к своим 20 годам обзавелись резюме на Head Hunter.
Менеджеры сообществ могут настроить уведомления о новых резюме, автоматически публиковать созданные в приложении вакансии на стене группы, распечатывать понравившиеся анкеты.
Основная фича, которую оценят соискатели - это автоматическое заполнение резюме из релевантных полей личной страницы «ВКонтакте». Данные при этом можно дополнять и изменять.
CRM-система, хорошо знакомая многим предприятиям сферы услуг, теперь появилась во «ВКонтакте». Клиенты салонов красоты, медицинских центров, автосервисов и прочих бизнесов, обслуживающих клиентов по расписанию, могут выбрать удобное время визита самостоятельно, а владельцы предприятий получают еще один инструмент увеличения продаж. Как результат, запись «укомплектовывается» с минимальным количеством окон, клиенты не теряются, вовлеченность подписчиков сообщества увеличивается, конверсия из подписчиков в продажи растет.
Приложение полностью дублирует страницу мероприятия на сервисе TimePad. Чтобы анонсировать событие или продавать билеты, сначала необходимо создать страницу мероприятия на сайте, далее ввести в приложение ссылку на неё - все данные подгрузятся автоматически. Можно использовать как в самих группах, так и во встречах сообщества.
Приложение бесплатное, однако нужно учитывать, что за продажу билетов TimePad берет комиссию, кроме того, будет необходимо заключить договор с сервисом.
«Афишу» можно использовать как в самих группах, так и во встречах сообщества.
Следующие три приложения принадлежат разработчику Happy Santa. Представлены от простого к сложному.
5. АнкетыПриложение позволяет создавать анкеты с вопросами различных типов, а также многошаговые голосования. Анкета может стать как инструментом изучения аудитории, так и клиентским брифом или формой обратной связи - назначение зависит от ваших задач.
Функциональность блока работы со статистикой поможет изучить аудиторию под нужным углом, а настройка оповещений о прохождении анкеты для администраторов и пользователей сделают работу комфортной для обеих сторон. По возможностям анкеты практически идентичны Google Forms.
Пригодится не только бизнес-сообществам, но и любым другим.
6. ТестыОтличная возможность устроить срез знаний аудитории вашей группы, не перенаправляя её на внешний сайт. Кроме того, тесты можно использовать для организации различного рода викторин, например, на знание фактов из жизни кумира в фан-сообществе.
Здесь доступно несколько типов вопросов, кроме того, администраторы могут решить, на каком этапе пользователь узнает правильные ответы и узнает ли их вообще. Для автоматизации подсчета результатов каждому вопросу можно назначать баллы.
Минусы приложения: невозможно собрать данные в разрезе отдельно взятого респондента. Статистика по ответам представляется в суммарном виде по итогам всех прохождений теста.
7. ЗаявкиНастоящая мини-CRM для «ВКонтакте» может стать отличным инструментом для конвертирования пользователей соцсети в клиентов.
Совет от Checkboxes:
Приложение комфортно решает задачи менеджеров, обрабатывающих входящие обращения: в зависимости от стадии работы с клиентом заявкам можно назначать статусы, по каждому из обращений оставлять комментарии для коллег и себя, чтобы ничего не забыть:) Важное преимущество: с потенциальными клиентами можно связываться от имени сообщества через сообщения, таким образом коммуницируя с ними в привычной для них среде.
Совет от Checkboxes:
Чтобы контакт с потенциальным заказчиком был максимально быстрым, позаботьтесь о том, чтобы администраторы получали автоматические уведомления о новых заявках, а чтобы клиенты были спокойны - настройте автоматическое сообщение о том, что заявка принята.
Последнее приложение от Happy Santa, разработанное по многочисленным просьбам представителей сообществ.
«Пожертвования» помогут организовать сбор средств через «Яндекс.Деньги», Qiwi Кошелек, PayPal и Cloudpayments.
Кстати, Happy Santa в скором времени обещает выпустить еще одно очень полезное на наш взгляд решение - приложение для администраторов сообществ «Модератор ВКонтакте». Оно будет моментально информировать комьюнити-менеджеров о новых активностях в группах, а значит ответы на комментарии на стенах и в темах не заставят себя долго ждать:)
О возможностях этого и других приложений, которые сейчас дорабатываются и тестируются, мы расскажем в одном из наших следующих обзоров.
P.S. Давайте следить вместе за развитием приложений «ВКонтакте». Все новое - это хорошо забытое старое, мы ведь с вами помним виджеты.
Интересно, приживутся ли iFrame-приложения на этот раз?
Статьи iT заметки HTML&CSS Запомним навсегда: чем отличаются margin и paddingШастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.
Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).
200?"200px":""+(this.scrollHeight+5)+"px");">
.block {
width: 160px;
height: 160px;
background-color: red;
margin-top: 40px;
margin-left: 70px;
padding-top: 40px;
padding-left: 40px;
}
текст, текст, много текста, много - много текста текста
Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.
В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.
Особенности margin и padding
И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
+
В этой теме Вы можете задать вопрос о материале.
Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.
Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).
.block {
width: 160px;
height: 160px;
background-color: red;
margin-top: 40px;
margin-left: 70px;
padding-top: 40px;
padding-left: 40px;
}
текст, текст, много текста, много - много текста текста
Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.
В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.
Особенности margin и paddingПри использовании padding, размеры padding"а должны вычитаться из высоты и ширины блока, в противном случае размер блока увеличится на размер padding"а.
Если какому-то блоку задать margin-left и margin-right со значениями auto, то если у блока имеется фиксированная ширина (например 400px) и нет CSS-свойста float, то этот блок будет выровнен по центру элемента, в котором он находится. Собственно для нерезиновой вёрстки с выравниванием по центру этот способ выравнивания обычно и используется. Несмотря на то, что IE 5.5 и младше значение auto не поддерживают, это всё равно не мешает его всё время использовать=).
Нежелательно использование padding и margin в таблицах, потому что эффект будет непредсказуемым в различных браузерах.
И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
19 ответов
TL; DR: по умолчанию я использую поле везде, кроме случаев, когда у меня есть рамка или фон, и я хочу увеличить пространство внутри этого видимого поля.
Для меня самая большая разница между отступом и полем заключается в том, что вертикальные поля автоматически сжимаются, а отступы - нет.
Рассмотрим два элемента, один над другим, каждый с отступом 1em . Этот отступ считается частью элемента и всегда сохраняется.
Таким образом, вы получите содержимое первого элемента, за которым следует заполнение первого элемента, затем дополнение второго, а затем содержимое второго элемента.
Таким образом, содержимое этих двух элементов в конечном итоге будет 2em на 2 элемента.
Теперь замените этот отступ с полем 1em. Поля считаются за пределами элемента, и поля смежных элементов будут перекрываться.
Таким образом, в этом примере вы получите содержимое первого элемента, за которым следует 1em комбинированного поля, а затем содержимое второго элемента. Таким образом, содержание этих двух элементов находится на расстоянии 1 1em .
Это может быть очень полезно, когда вы знаете, что хотите сказать 1em расстояния между элементами, независимо от того, с каким элементом он находится рядом.
Два других больших различия заключаются в том, что отступы включены в область щелчка и цвет фона/изображения, но не в поле.
Лучшее, что я видел, объясняя это примерами, диаграммами и даже "попробовать сами", - это .
Нижеприведенная диаграмма дает мгновенное визуальное представление о различии.
Одна вещь, о которой следует иметь в виду, - это браузеры, совместимые со стандартами (IE quirks - это исключение) отображает только часть контента в заданную ширину, поэтому отслеживайте это в расчетах компоновки. Также обратите внимание на то, что в рамке окна видна поддержка с поддержкой Bootstrap 3 .
MARGIN vs PADDING :
Маржа используется в элементе для создания расстояния между этим элементом и другими элементами страницы. Если отступы используются для создания расстояния между содержимым и границей элемента.
Маржа не является частью элемента, где дополнение является частью элемента.
Есть больше технических объяснений для вашего вопроса, но если вы ищете способ подумать о марже и дополнении, которые помогут вам выбрать, когда и как их использовать, это может помочь.
Сравните элементы блока с картинками, висящими на стене:
- Окно браузера похоже на стену.
- контент похож на фотографию.
- margin похож на пространство между изображениями в рамке.
- дополнение похоже на матирование вокруг фотографии.
- Граница аналогична границе кадра.
При решении вопроса о марже и отступе полезно использовать эмпирическое правило margin , когда вы располагаете элемент в отношении к другим вещам на стене и дополнением . > когда вы настраиваете внешний вид самого элемента. Маржа не изменит размер элемента, но отступы обычно делают элемент больше 1 .
1 Эта модель окна по умолчанию может быть изменена с помощью атрибута box-sizing .
Что касается полей, то вам не нужно беспокоиться об ширине элемента.
Как и когда вы даете что-то {padding: 10px;} , вам нужно уменьшить ширину элемента 20px , чтобы сохранить " fit " и не нарушать другие элементы вокруг него.
Поэтому я обычно начинаю с использования paddings, чтобы получить все " packed ", а затем использовать поля для небольших настроек.
Еще одна вещь, о которой нужно знать, - это то, что paddings более совместимы в разных браузерах, и IE не очень хорошо относится к отрицательным полям.
Вот несколько HTML, которые демонстрируют, как padding и margin влияют на кликабельность и заполнение фона. Объект получает клики по своему дополнению, но нажимает на область margin"d объектов, чтобы перейти к ее родительскому объекту.
$(".outer").click(function(e) { console.log("outer"); e.stopPropagation(); }); $(".inner").click(function(e) { console.log("inner"); e.stopPropagation(); }); .outer { padding: 10px; background: red; } .inner { margin: 10px; padding: 10px; background: blue; border: solid white 1px; }
Поля очищают область вокруг элемента (вне границы), но добавка очищает область вокруг содержимого (внутри границы) элемента.
это означает, что ваш элемент не знает о его внешних границах, поэтому, если вы разрабатываете динамические веб-элементы управления, я рекомендую использовать прописку и маржу, если вы можете.
обратите внимание, что несколько раз вам нужно использовать margin.
В CSS есть два способа создать пространство вокруг ваших элементов: поля и padding. В большинстве сценариев использования они функционально идентичны, но, по правде говоря, они ведут себя несколько иначе. Существуют важные различия между полями и отступом, которые вы должны учитывать при выборе того, что нужно использовать для перемещения элементов вокруг страницы. Тем не менее, в тех случаях, когда любые поля или отступы могут использоваться для одного и того же эффекта, многие решения сводятся к личным предпочтениям.
Когда использовать поля
Вы хотите, чтобы ваш интервал появлялся за пределами поля, созданного свойством border. Поля лежат за пределами границ, поэтому вы используете их, если хотите, чтобы ваша граница оставалась в одном месте. Это может быть полезно, если у вас есть, например, боковая панель с рамкой, которую вы хотите отойти от основной области содержимого.
Вы не хотите, чтобы цвет фона или изображение вторгались в ваше личное пространство. Фоновые цвета и изображения останавливаются на границе, поэтому, если вы скорее сохраните свои фоны вне пространства, которое вы делаете, поля - это свойство, которое вы хотите.
Вы хотите сбрасывать пространство сверху и снизу вашего элемента. Верхний и нижний поля ведут себя иначе, чем боковые поля, в том случае, если два поля расположены поверх друг друга, они сворачиваются до размера самого большого набора полей. Например, если я установил абзац с верхним краем в 20 пикселей и нижним полем в 15 пикселей, у Ill будет всего 20 пикселей пространства между абзацами (два поля разваливаются друг на друга, а наибольшие выигрыши).
Когда использовать прокладку
- padding-top: значение;
- padding-right: значение;
- padding-bottom: значение;
- padding-left: значение;
- margin-top: значение;
- margin-right: значение;
- margin-bottom: значение;
- margin-left: значение;
- 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
- 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
- 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
- 1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;
- Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
- Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
20 + (-18) = 20 — 18 = 2 пикселя. - Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
- В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
- Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.
Вы хотите, чтобы все пространство, созданное вами, было внутри вашей границы. Прокладка находится внутри ваших границ, поэтому ее полезно для того, чтобы оттолкнуть ваши границы от содержимого внутри вашего элемента.
Вам нужно, чтобы ваш цвет фона/изображение продолжался в пространстве, создаваемом вами. Ваш фон будет продолжен за вашим дополнением, поэтому используйте его, только если вы хотите, чтобы ваш фон выглядел.
Вы хотите, чтобы ваше верхнее и нижнее пространство вел себя более жестко. Например, если вы установите абзацы в своем документе, чтобы иметь верхнее заполнение 20 пикселей и нижнее дополнение 15 пикселей, тогда в любое время, когда у вас было два абзаца в строке, на самом деле они имеют в общей сложности 35 пикселей пространства между ними.
Разница расширенного поля и пояснения
Нецелесообразно использовать padding для содержимого пространства в элементе; вы должны использовать margin для дочернего элемента. Старые браузеры, такие как Internet Explorer, неправильно истолковали модель окна, за исключением случаев использования margin , который отлично работает в Internet Explorer 4.
При использовании padding существует два исключения:
Он применяется к встроенному элементу, который не может содержать дочерние элементы, такие как элемент ввода.
Вы компенсируете очень разную ошибку браузера, которую продавец * cough * Mozilla * cough * отказывается исправлять и быть уверенным (в той степени, в какой вы регулярно проводите обмен с редакторами W3C и WHATWG), которые вы должны иметь рабочее решение и это решение не будут влиять на стилирование чего-либо другого, кроме ошибки, которую вы компенсируете.
Когда у вас есть элемент 100% ширины с padding: 50px; , вы получите width: calc(100% + 100px); . Поскольку margin не добавляется в width , это не вызовет неожиданных проблем с макетами, если вы используете margin on child elements вместо padding непосредственно в элементе.
Итак, если вы не делаете одну из этих двух вещей, не добавляйте дополнение к элементу, а к нему следует использовать элемент child/children, чтобы обеспечить ожидаемое поведение во всех браузерах.
Сначала посмотрим, каковы различия и какова каждая ответственность:
1) Маржа
Свойства поля CSS используются для создания пространства вокруг элементов.
Свойства поля задают размер пробела вне поля границы. С CSS вы полностью контролируете поля.
Есть Свойства CSS для задания поля для каждой стороны элемента (вверху, справа, внизу и слева).
2) Прокладка
Свойства прошивки CSS используются для создания пространства вокруг содержимого.
Прокладка очищает область вокруг содержимого (внутри границы) элемент.
С CSS вы имеете полный контроль над дополнением. Там являются свойствами CSS для установки дополнения для каждой стороны элемента (вверху, справа, внизу и слева).
Так просто Поля - это пространство вокруг элементов, а Прокладка - это пространство вокруг содержимого, которое является частью элемента.
Это изображение из codemancers показывает, как границы и границы становятся доступными, а также то, как границы и контент-ящик делают их разными.
В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:
Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками
Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.
Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:
Поля:
Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .
Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:
Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.
Схлопывание marginПредставьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Расстояние между блоками равно большему из значений
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному: