Как запомнить в CSS, что поле находится за границей, а отступы внутри

Question

Я не очень часто редактирую CSS, и почти каждый раз, когда мне нужно пойти и погуглить блочную модель CSS , чтобы проверить, находится ли padding внутри border и margin снаружи или наоборот. (Только что проверил еще раз и padding внутри).

У кого-нибудь есть хороший способ запомнить это? Немного мнемоники, хорошее объяснение того, почему имена такие круглые ...

Answer 1

Когда работа с CSS окончательно сводит вас с ума, в ячейке с подкладкой, в которую вас поместят, есть отступ на внутри стен.

Answer 2

Вы используете ящик. Если вы положили что-то в коробку, вы бы положили внутрь несколько подкладок, чтобы они не ударялись о боковые стороны. Маржа тогда была бы другой вещью.

Answer 3

pin - P находится в

Answer 4

Обивка обычно используется внутри. Либо с внутренней стороны стены, либо с доставочной коробкой, это просто. А если отступ внутри, то поле снаружи. Не должно быть слишком сложно.

Answer 5

Для меня «padding» звучит более внутренне, чем «margin». Возможно, размышление о печатной странице поможет? Поля - это области, расположенные далеко за пределами - как правило, вы даже не можете печатать до краев - они не заметны. Внутри этих полей контент может быть дополнен, чтобы обеспечить дополнительный барьер между контентом и полем?

Как только вы достаточно поработаете в CSS, это станет второй натурой помнить об этом.

Answer 6

Распечатайте диаграмму из раздела Размеры коробки спецификации и прикрепите ее к стене.

Answer 7

Тим Сондерс дал несколько отличных советов - когда я только начал работать с CSS, я решил создать хорошую, полностью комментируемую базовую таблицу стилей. Эта таблица стилей много раз менялась и остается потрясающим ресурсом.

Однако, когда я столкнулся с моими проблемами с блочной моделью, я начал использовать «Mo Pi». Например, «Я не достаточно толстый, мне нужно есть мо пи». Странно, но у меня это сработало. Конечно, я изучаю CSS на двадцать фунтов ...; -)

Answer 8

Я только что узнал об этом со временем - блочная модель довольно проста, но главная причина, по которой людям это трудно, заключается в том, что body не нарушает модель.

Действительно, если вы дадите body поле и фон, вы должны увидеть его в окружении белой полосы. Однако это не так - отступы body такие же, как и у поля. Это устанавливает несколько неправильных вещей о модели коробки.

Я обычно думаю об этом так:

• поле = интервал вокруг поля;
• border = край коробки;
• Заполнение = пространство внутри поля.

Answer 9

PAdding - это PAINT элемента PAinting: он расширяет background элемента. Имеет смысл думать о парном элементе + заполнении как об общем фоне. Обивка аналогична холсту картины: чем больше обивка, тем больше холст и, следовательно, фон. Граница (рамка картины) обойдет эту пару. А margin будет отделять картины на стене галереи. Размышление о концепции фона объекта помогает склеить пару объект + заполнение. Обычные объяснения того, что находится внутри и снаружи, не прилипают к памяти: через некоторое время все возвращаются к первоначальной путанице. Помните также, что поля могут складываться вертикально, а отступы - нет.

Answer 10

Я знаю, что это ответ на ваш вопрос, но больше подсказка. Всякий раз, когда я имею дело с полями и отступами, я добавляю рамку вокруг части, с которой вы работаете, затем оттуда она показывает комнату, с которой мне нужно работать. Когда я все готово, я удаляю границу.