CSS margin-top

christian.dinh's avatar
Published Jul 6, 2021Updated Sep 3, 2021
Contribute to Docs

Defines the top margin area for an element.

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

Syntax

margin-top: <value>;

where <value> can be one of the following:

  • Length: 20px
  • Percentage: 5%

Note: values provided may be negative, placing the neighboring element closer.

Example 1

Set the top margin of the h1 element to be 20px:

h1 {
margin-top: 20px;
}

Example 2

Set the top margin of the h1 element to be 5%:

h1 {
margin-top: 5%;
}

All contributors

Contribute to Docs

Learn CSS on Codecademy

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours