css span 内外边距_CSS边距

css span 内外边距

The margin is the blank space around an element provided to position the element comfortably. The additional space added, does not have any background color, it is completely transparent.

边距是元素周围的空白区域，用于为元素提供舒适的位置。 添加的额外空间，没有任何背景色，它是完全透明的。

You can set a margin around an element by using the margin property.

您可以使用margin属性在元素周围设置margin 。

Syntax:

句法：

margin: value in px, em or % | inherit

Where margin value is either a length, percentage value, auto, or inherit from the parent element.

其中边距值是长度，百分比值，自动值或从父元素继承的值。

Here is a video to explain all about margin property.

这是一段视频，解释所有关于margin属性的信息。

演示地址

Live Example →

现场示例→

Video Transcript:

影片字幕：

If two values are provided in the margin property, the first will set the top and bottom margins and the second value applies to the right and left margins. Similarly, if three values are provided to the margin shorthand, the first applies to the top margin, second to the right and left margins, while the third value applies to the bottom margin. Notice how the unspecified margin is inferred from the value defined for its opposite side. If you wish to set the values for all four sides, you can set them in this order: top, right, bottom, left.

如果margin属性中提供了两个值，则第一个将设置顶部和底部边距，第二个值将应用于右侧和左侧边距。 同样，如果提供给三个值margin速记， 第一适用于顶缘， 第二至右和左边缘，而第三值应用于下边距。 请注意，未指定的边距是如何从为其相对侧定义的值中推断出来的。 如果要设置所有四个面的值，则可以按以下顺序设置它们： top ， right ， bottom ， left 。

This is illustrated in the following example:

在以下示例中对此进行了说明：

边距：25px 50px 75px 100px; (margin: 25px 50px 75px 100px;)

• margin from the top will be 25px

  顶部的边距将为25px

• margin from the right will be 50px

  右边距为50px

• margin from the bottom will be 75px

  底部的边距将为75px

• margin from the left will be 100px

  左边距为100px

边距：25px 50px 75px; (margin: 25px 50px 75px;)

• margin from the top will be 25px

  顶部的边距将为25px

• margin from the right and left will be 50px

  左右边距为50px

• margin from the bottom will be 75px

  底部的边距将为75px

边距：25px 50px; (margin: 25px 50px;)

• top and bottom margins: 25px

  上下边距：25px

• right and left margins: 50px

  左右边距：50px

边距：50px; (margin: 50px;)

• margin on all the sides will be 50px

  两侧的边距将为50px

Elements may have default margins on them and these values may vary. If you want to reset all margins to zero and then add your own margins, you can use a wildcard rule like *{ margin: 0; } to clear all margins. Also note than margin values can be negative.

元素上可能具有默认边距，并且这些值可能会有所不同。 如果要将所有边距重置为零，然后添加自己的边距，则可以使用通配符规则，例如* {margin：0; }清除所有边距。 另请注意，边距值可以为负。

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

• IE 6+

  IE 6+

• Firefox 1+

  Firefox 1+

• Opera 3.5+

  Opera 3.5+

• Safari 1+

  Safari 1+

• Chrome 1+

  Chrome1+

So, that's all about margins. This was pretty easy, right? Let’s move ahead to positioning elements.

所以，这一切都与利润有关。 这很容易，对吗？ 让我们继续定位元素。

翻译自: https://www.studytonight.com/cascading-style-sheet/css-margins

css span 内外边距