CSS guarantees metallicity

Margin is a simple CSS property. I have forgotten its shorthand syntax, so I wrote this reference article

ThismarginCSS properties are usually used in CSS to add space around elements.

remember:

  • 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:

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

The usage of these is very simple and should not be confused, for example:

margin-left: 30px;
margin-right: 3em;

usemarginshorthand

marginIt is an abbreviation for specifying multiple margins at the same time, and its behavior will vary depending on the number of values entered.

1 value

Use a single value to apply it toAllMargin: top, right, bottom, left.

margin: 20px;

2 values

Use 2 values to apply the first oneBottom and top,the secondabout.

margin: 20px 10px;

3 values

Use 3 values to apply the first oneoptimal,the secondabout,The thirdbottom.

margin: 20px 10px 30px;

4 values

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.

Accepted value

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 valuesauto.

useautoElement-centric

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 justify-content: center; directive.


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


margin is 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:

Online technical encyclopedia!