Margin is a simple CSS property. I have forgotten its shorthand syntax, so I wrote this reference article
marginCSS properties are usually used in CSS to add space around elements.
marginAdd space outside the element boundary
paddingAdd space inside the element border
Specific guaranteed metallicity
marginThere are 4 related properties that can change the margin of a single side at a time:
The usage of these is very simple and should not be confused, for example:
margin-left: 30px; margin-right: 3em;
marginIt is an abbreviation for specifying multiple margins at the same time, and its behavior will vary depending on the number of values entered.
Use a single value to apply it toAllMargin: top, right, bottom, left.
Use 2 values to apply the first oneBottom and top,the secondabout.
margin: 20px 10px;
Use 3 values to apply the first oneoptimal,the secondabout,The thirdbottom.
margin: 20px 10px 30px;
Use 4 values to apply the first oneoptimal,the secondcorrect,The thirdbottom,the fourthLeft.
margin: 20px 10px 5px 0px;
So, the order isTop right-bottom left.
marginAccept the value expressed in any length unit, the most common are px, em, rem, butThere are many others.
It also accepts percentage values and special values
autoCan be used to tell the browser to automatically select margins, and is most commonly used to center elements in this way:
margin: 0 auto;
As said above, using 2 values applies the first to bottom & top, and the second to left & right.
The modern way to center elements is to use Flexbox, and its
Older browsers of course do not implement Flexbox, and if you need to support them
margin: 0 auto;is still a good choice.
Using a negative margin
marginis the only property related to sizing that can have a negative value. It’s extremely useful, too. Setting a negative top margin makes an element move over elements before it, and given enough negative value it will move out of the page.
A negative bottom margin moves up the elements after it.
A negative right margin makes the content of the element expand beyond its allowed content size.
A negative left margin moves the element left over the elements that precede it, and given enough negative value it will move out of the page.
Download my free CSS Handbook
More css tutorials:
- The Flexbox Guide
- CSS Grid Tutorial
- CSS Variables (Custom Properties)
- Introduction to PostCSS
- The CSS margin property
- How to center an element with CSS
- CSS System Fonts
- How to print your HTML with style
- An introductory guide to CSS Transitions
- A CSS Animations Tutorial
- Introduction to CSS
- The CSS Guide
- How to setup Tailwind with PurgeCSS and PostCSS
- The Tailwind Cheat Sheet
- How to continuously rotate an image using CSS
- Making a table responsive using CSS
- How to debug CSS by bisecting
- CSS Selectors
- CSS Cascade
- CSS Specificity
- CSS Attribute Selectors
- CSS Colors
- CSS Units
- CSS url()
- CSS Typography
- The CSS Box Model
- The CSS position property
- CSS Media Queries and Responsive Design
- CSS Feature Queries
- CSS Transforms
- How to style lists using CSS
- CSS Vendor Prefixes
- CSS Inheritance
- CSS Pseudo Classes
- CSS Pseudo Elements
- Styling HTML Tables with CSS
- The CSS Display property
- The CSS calc() function
- CSS Borders
- Importing a CSS file using @import
- CSS Error Handling
- CSS Filters
- CSS Box Sizing
- CSS Backgrounds
- CSS Comments
- CSS Fonts
- CSS Padding
- The CSS float property and clearing
- CSS Normalizing
- The CSS z-index property
- How to disable text selection using CSS
- How to put an item at the bottom of its container using CSS
- How to invert colors using CSS
- Responsive pre tags in CSS
- Responsive YouTube Video Embeds
- What are good CSS Breakpoint values for Responsive Design?
- How to align center in flexbox