Просмотр и редакторование блоковой модели

Просмотр Блоковой модели

Если использовать инструмент "Кнопка выбора элемента" и навести на элемент на странице, вы увидите блоковую модель этого элемента которая появится поверх него:

Также если вы наведёте на элемент в  панели HTML  то поверх него появится блоковая модель:

С  39той версии Firefox  строковые элементы разделяются на несколько строк-блоков, подсветка показывает каждую линию в индивидуальной строке-блоке:

Вкладка блоковой модели

Если выбран элемент вы можете увидеть его блоковую модель во вкладке блоковой модели:

С 40й версии Firefox если навести на значение можно увидить подсказку из какого правила оно приходит:

Если в этой вкладке навести на часть блоковой модели, то эта часть подсветиться на странице:

Изменение блоковой модели

Вы также можете изменять значения во вкладке блоковой модели, изменения мгновенно отоброзятся на странице: