Sensible css defaults taken from css-layout

sensible-defaults.css

div, span {
  box-sizing: border-box;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  align-content: flex-start;

  border: 0 solid black;
  margin: 0;
  padding: 0;
}

Taken from css-layout README:

• box-sizing: border-box is the most convenient way to express the relation between width and borderWidth.
• Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.
• All the flex elements are oriented from top to bottom, left to right and do not shrink. This is how things are laid out using the default CSS settings and what you'd expect.
• Everything is position: relative. This makes position: absolute target the direct parent and not some parent which is either relative or absolute. If you want to position an element relative to something else, you should move it in the DOM instead of relying of CSS. It also makes top, left, right, bottom do something when not specifying position: absolute.