Как запомнить в CSS, что поле находится за пределами границы, а отступ внутри
https://stackoverflow.com/questions/32668
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я не очень часто редактирую CSS, и почти каждый раз, когда мне нужно пойти и погуглить Боксовая модель CSS чтобы проверить, является ли padding находится внутри border и margin снаружи, или наоборот.(Просто проверил еще раз и padding находится внутри).
У кого-нибудь есть хороший способ запомнить это?Небольшая мнемоника, хорошее объяснение того, почему имена расположены именно так...
Решение
Когда работа с CSS окончательно сводит вас с ума, заполненная ячейка, в которую вас поместят, имеет заполнение на внутри из стен.
Другие советы
pin - P находится в
Вы используете коробку.Если бы вы клали что-то в коробку, вы бы положили внутрь немного набивки, чтобы убедиться, что это не ударяется о стенки.Тогда маржа была бы совсем другим делом.
Распечатайте диаграмму из Размеры коробки разделите спецификацию и повесьте ее на стену.
Для меня "заполнение" просто звучит более внутренне, чем "поле".Может быть, мысль о напечатанной странице помогла бы?Поля - это области, расположенные далеко за пределами - как правило, вы не можете печатать даже до края - они ничем не примечательны.В пределах этих полей содержимое может быть дополнено, чтобы создать дополнительный барьер между содержимым и полем?
Как только вы достаточно поработаете с CSS, запоминать это станет вашей второй натурой.
Внутри обычно используется набивка.Либо на внутренней стороне стены, либо в коробке для доставки - это просто.И если отступ находится внутри, то поле - снаружи.Это не должно быть слишком сложно.
Я просто узнал это со временем - коробочная модель довольно проста, но основная причина, по которой людям это кажется трудным, заключается в том, что body заметно не нарушает модель.
Действительно, если вы дадите body поле и фон вы должны увидеть, что они окружены белой полосой.Однако это не тот случай - bodyотступы такие же, как и на полях.Это устанавливает несколько неправильных положений о коробочной модели.
Обычно я думаю об этом так:
- margin = расстояние между рамками;
- граница = край рамки;
- заполнение = пространство внутри поля.
Тим Сондерс дал несколько отличных советов - когда я только начинал работать с CSS, я взял за правило создавать хорошую, полностью прокомментированную базовую таблицу стилей.Эта таблица стилей менялась много раз и остается потрясающим ресурсом.
Однако, когда я столкнулся со своими собственными проблемами с коробочной моделью, я начал использовать "Mo Pi".Например, "Я недостаточно толстый, мне нужно есть мо пи". Странно, но у меня это сработало.Конечно, я прибавил в весе двадцать фунтов, пока изучал CSS ...;-)
используйте firebug, чтобы помочь вам увидеть.
Создайте самостоятельно базовую таблицу стилей с комментариями, которую вы можете использовать в качестве шаблона всякий раз, когда вам нужно создать новый сайт или отредактировать существующий сайт.
Вы можете дополнять его по мере роста своих знаний и применять в различных браузерах, чтобы увидеть, как ведут себя различные вещи.
Вы также сможете добавлять комментарии или примеры о других трудных для запоминания материалах или о том, что противоречит интуиции.
Добавьте границу, хотя бы временно.Поиграв с цифрами, вы увидите разницу.
На самом деле, временные границы вокруг элементов - это полезный способ работы, так что вы можете видеть, почему плавающие элементы удаляются и т.д.
Я знаю, что это ответ на ваш вопрос, но скорее совет.Всякий раз, когда я имею дело с полями и отступами, я добавляю рамку вокруг детали, с которой вы работаете, и оттуда она показывает мне комнату, с которой мне предстоит работать.Когда у меня все готово, я снимаю рамку.
Заполнение - это часть рисунка элемента:это расширяет возможности элемента предыстория.Имеет смысл думать о паре элемент + заполнение как об общем фоне.Набивка аналогична холсту картины:чем больше отступ, тем больше холст и, следовательно, фон.Граница (рамка картины) будет огибать эту пару.И маржа будут отдельные картины на стене галереи.Размышление о концепции фона объекта помогает склеить пару объект + заполнение вместе.Обычные объяснения того, что находится внутри и снаружи, не запоминаются:через некоторое время все возвращаются к первоначальному замешательству.Помните также, что поля можно сворачивать по вертикали, а отступы - нет.
Вместо того чтобы снова и снова обращаться к Google, вы просто используете окно инспектора.На этой вкладке стиля и прокрутите вниз до самого низа, вы можете увидеть вот это.
Поле: Когда вы хотите переместить блок.Заполнение:Когда вы хотите переместить элементы внутри блока.
