Skip to main content
HashnodeCode March's blog

Command Palette

Search for a command to run...

CSS Margins

Published
•1 min read•View as Markdown
CSS Margins
C
Codemarch Blog's

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

image.png

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Example 1👇 image.png

Example 2👇 image.png

Margin-Shorthand Property 👇

To shorten the code, it is possible to specify all the margin properties in one property.

Diagram 👇 image.png

Example1👇 image.png

All CSS Margin Properties 👇 image.png

The auto Value

You can set the margin property to auto to horizontally center the element within its container.👇

image.png

It is possible to give margins a negative value 👇

image.png

Margin Collapse👇

👉 The top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

👉 This does not happen on left and right margins! Only top and bottom margins!

Example👇

image.png

image.png> Download our HTML & CSS Visual Treat! ebook Here: Click here

#web-development#javascript#html5#css#reactjs

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Code March's blog

46 posts