• Vertical padding is relative to element’s width not height

So padding-top: 50% does not add 50% of the original height of the element as padding, but 50% of the width of the parent element:

Knowing this we can easily make responsive elements that keep their height/width ratio:

.square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

• Margins overlap, but only sometimes

So space…

Peedu Tuisk

Creative Lead, designer & developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store