CSS Basics for Designers: 5 Terms to Learn

CSS Basics for Designers: 5 Terms to Learn

1. em

Similar to the concept of vectors in the design world.

An em is a relative unit of measurement. It is better than using pixels (px), because it adapts based on the screen’s size.

Similar to the way that you can create a vector graphic and scale it up or down to whatever size you need, without losing quality or crispness.

Example use: font-size: 1.2em;

2. line-height

Also known as leading in the design world.
Line-height creates equal vertical distance between each line of text.

Example use: line-height: 3.2em;

3. letter-spacing

Also known as tracking in the design world.
Letter-spacing creates equal horizontal distance between each letter.

Example use: letter-spacing: 2.5em;

4. padding

The space within an element.
Padding adds extra space inside of an element.

Example use: padding: 8%; which is also the same thing as using: padding-bottom: 8%; padding-left: 8%; padding-right: 8%; padding-top: 8%;

5. margin

The space around an element.
Margin adds extra space outside of an element.

Example use: margin: 5%; which is also the same thing as using: margin-bottom: 5%; margin-left: 5%; margin-right: 5%; margin-top: 5%;

1 comment

Leave a comment

Your email address will not be published. Required fields are marked *

Thanks for reading! :) 


P.S. If you found this post helpful, you can buy me a coffee here ☕️

Save or share this post: