Home Logic Battle Card RPG Godot Tutorials Linux Gaming Blog NodeJS + Postgres LAMP Stack HTML CSS PHP ReactJS VR Tech Blog Palm Beach Techie PHP Fiddle

Intro to CSS: Margins

Quick Copy Boxes

Margins are space around your element

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Margin Syntax

.withMargins {
   margin-top: 50px;
   margin-bottom: 75px;
   margin-right: 100px;
   margin-left: 125px;

withMargins - This is our CSS class name.
margin-top - Above our element, there will be 50px of space.
margin-bottom - Below our element, there will be 75 px of space.
margin-right - To the right of our element, there will be 100 px of space.
margin-left - To the left of our element, there will be 125 px pf space.


  <div class = 'withMargins'>
         On this glorious day we will learn about margins.
         I love margins!  How about you?

Color Selector



Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.