Styles: Elements and pseudo elements use different box sizing.

[peterwilsoncc]

Issue Overview

edit-post/assets/stylesheets/main.scss sets the box-sizing property with this rule set.

.gutenberg {
	* {
		box-sizing: border-box;
	}
}

This causes elements to have border-box sizing while pseudo elements (::before, ::after) use the browser default content-box.

Steps to Reproduce (for bugs)

See gif below.

1. Start a new post in Gutenberg
2. Add a block (list block used in gif below)
3. In the inspector, select a pseudo element editor-block-list__block-edit::before to inspect styles. Box sizing will show content-box.
4. Select the pseudo elements parent editor-block-list__block-edit to inspect styles. Box sizing will show border-box.

Expected Behavior

A consistent sizing method would be preferable.

Current Behavior

Sizing method is inconsistent.

Possible Solution

Two possibilities

.gutenberg {
	 box-sizing: border-box;

	&:before, &:after,
	*, *:before, *:after {
		box-sizing: inherit;
	}
}

or

.gutenberg {
	*, *:before, *:after {
		box-sizing: border-box;
	}
}

Either change will require visual regression testing.

Screenshots / Video

Related Issues and/or PRs

Todos

• Tests
• Documentation

[karmatosed]

I am going to remove the design feedback label as this is a work in progress with a PR.