Анализ свойств элемента инструментов разработчика Google Chrome

Question

Может кто-нибудь объяснить, что означает цвет в оранжевом?

Во-первых, я считал, что это интервал между полями, но я видел, что край фактически равен нулю.

Screenshot (К сожалению, я еще не могу размещать любые изображения на Stackoverflow)

Спасибо заранее.

Answer 1

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

Answer 2

Элемент, который вы выделили - <p> - не имеет поля или прокладки, поэтому он отображается как ноль на диаграмме внизу. Оранжевая область фактически является областью контейнера div 'hist'. Если вы выделите содержащий элемент с помощью одного и того же инструмента, вы, вероятно, обнаружите, что у него есть padding-right, который вызывает пустое пространство (точнее, заполнение его заполнением, чтобы текст не мог его ввести), или ваш <p> имеет максимальную ширину который вызывает у него пустое пространство или обертывание до того, как оно достигнет края.