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
输出量
![Margins in CSS | Example 1](https://i-blog.csdnimg.cn/blog_migrate/ba5c96aba22741debc9360047de44d5e.png)
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
输出量
![Margins in CSS | Example 2](https://i-blog.csdnimg.cn/blog_migrate/79bdb7a9bfbf57c5650fa47074290615.png)
负边距 (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
输出量
![Margins in CSS | Example 3](https://www.includehelp.com/code-snippets/Images/margin-in-css-3.jpg)
保证金属性简化 (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
输出量
![Margins in CSS | Example 4](https://www.includehelp.com/code-snippets/Images/margin-in-css-4.jpg)
边距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
输出量
![Margins in CSS | Example 5](https://i-blog.csdnimg.cn/blog_migrate/e9a34ced61c4563a3f0c44bce363b461.png)
翻译自: https://www.includehelp.com/code-snippets/margins-in-css.aspx
css中图片左右边距