css中图片左右边距

css中图片左右边距_CSS中的边距

css中图片左右边距

CSS保证金属性 (CSS margin property)

CSS Margins are used to space around any element, for this we use "margin" property in the CSS.

CSS边距用于在任何元素之间留出空间，为此，我们在CSS中使用“ margin”属性 。

Syntax:

句法：

    Element{
margin: length|auto|initial|inherit;
}

保证金崩溃 (Margin Collapsing)

When two margins are touching each other vertically, they are collapsed. But when they touch horizontally, they do not collapse.

当两个边距垂直相互接触时，它们将被折叠。但是，当它们水平接触时，它们不会塌陷。

Example:

例：

<!DOCTYPE html>
<head>
<style>
div {
margin: 20px;
}
</style>
</head>
<html>
<body>
<div>
Some content
</div>
<div>
Some more content
</div>
</body>
</html>

Output

输出量

They will be 20px apart since vertical margins collapse over one and other. (The spacing will not be the sum of two margins.)

由于垂直边距会彼此重叠，因此相距20px 。 (间距将不是两个边距的总和。)

在给定边上应用保证金 (Apply Margin on a Given Side)

In CSS you can specify a given side to apply a margin too. The four properties provided for this purpose are,

在CSS中，您也可以指定给定边以应用边距。为此目的提供的四个属性是：

margin-left
左边距
margin-right
右边距
margin-top
上边距
margin-bottom
底边

Example:

例：

<!DOCTYPE html>
<head>
<style>
#myDiv {
margin-left: 30px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<html>
<body>
<div id="myDiv">
Some content
</div>
</body>
</html>

Output

输出量

负边距 (Negative Margins)

CSS has properties that can be set to negative values. This property can be used to overlap elements without absolute positioning.

CSS具有可以设置为负值的属性。此属性可用于重叠元素而无需绝对定位。

Example:

例：

<!DOCTYPE html>
<head>
<style>
.over {
margin-left: -20px;
background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<div class="over">
Some content
</div>
</body>
</html>

Output

输出量

保证金属性简化 (Margin property simplification)

Here the shorthand is used to specify margin in every direction without writing for every direction.

在这里，速记用于指定每个方向上的边距，而无需为每个方向编写。

Example:

例：

<!DOCTYPE html>
<head>
<style>
p {
margin: 1px;
/* 1px margin in all directions */
background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<p>
Some content
</p>
</body>
</html>

Output

输出量

边距CSS：length | auto | initial | inherit (CSS for margin: length|auto|initial|inherit)

    margin: 1px;
margin: 1px 1px;
margin: 1px 1px 1px;
margin: 1px 1px 1px 1px;

左，右，上和下边距 (Left, Right, Top and Bottom Margins)

To provide margins for left, right, top and bottom to an object, we can use margin-left, margin-right, margin-top and margin-bottom properties respectively.

要为对象的左侧，右侧，顶部和底部提供边距，我们可以分别使用margin-left ， margin-right ， margin-top和margin-bottom属性。

Example:

例：

<!DOCTYPE html>
<head>
<style>
p {
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
margin-bottom: 30px;
/* 1px margin in all directions */
background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<p>This is line One.</p>
<p>This is line Two.</p>
<p>This is line Three.</p>
<p>This is line Four.</p>
</body>
</html>

Output

输出量