CSS保证金属性

margin是一个简单的CSS属性,它的速记语法我一直忘了,所以我写了这篇参考文章

marginCSS属性通常在CSS中用于在元素周围添加空间。

记住:

  • margin在元素边界外添加空间
  • padding在元素边框内添加空间

特定保证金属性

margin具有4个相关属性,这些属性可一次更改单个边的边距:

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

这些的用法非常简单,不能混淆,例如:

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

使用margin速记

margin是同时指定多个边距的简写形式,并且根据输入的值的数量,其行为会有所不同。

1个值

使用单个值可将其应用于全部边距:上,右,下,左。

margin: 20px;

2个值

使用2个值将第一个应用于底部和顶部,第二个左右

margin: 20px 10px;

3个值

使用3个值将第一个应用于最佳,第二个左右,第三个底部

margin: 20px 10px 30px;

4个值

使用4个值将第一个应用于最佳,第二个正确的,第三个底部,第四个剩下

margin: 20px 10px 5px 0px;

所以,顺序是右上-左下

接受值

margin接受以任何长度单位表示的值,最常见的是px,em,rem,但是存在许多其他

它还接受百分比值和特殊值auto

使用auto以元素为中心

auto可以用于告诉浏览器自动选择边距,并且最常用于以这种方式居中元素:

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: