Paddings, Border, Margin

Some font properties and space!

*Tip: Try having a notepad and writing down what you learn!

Back
Download Notes

In this video we talk about some new font properties that we can use to continue developing our design skills, while we also talk about the structured space each HTML element has. We can manipulate that space using CSS.

Main Points:

  1. Applying font properties to text elements: do not think font properties like "font-size" will have an effect on images for example!
  2. Remember to have fun and test extreme values to see what happens! Your computer wont explode, we promise!
  3. Padding: This is the space within the element. It is represented by the space from the Content to the Border.
  4. Border: This is the "wall" that encloses the element and its contents. You dont have to have a border though!
  5. Margin: This is the space outside the Border, and it helps "push" other elements away from the targeted element.
  6. Elements are given by default a certain about of design such as: font-size, padding, margin, border, all of which is determined by the element itself. So remember that just because you havent edited the margin doesnt mean there isnt already some applied by default.

Examples:

h3 {
----> font-size: 100px;
----> padding: 10px;
----> border: 5px red solid;
----> margin: 50px;
}

Sign Up