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

最新推荐文章于 2024-07-26 19:29:32 发布

cumt951045

最新推荐文章于 2024-07-26 19:29:32 发布

阅读量8.6k

点赞数

文章标签： css css3 html python html5

原文链接：https://www.includehelp.com/code-snippets/margins-in-css.aspx

版权

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

输出量

翻译自: https://www.includehelp.com/code-snippets/margins-in-css.aspx

css中图片左右边距

cumt951045

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
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: 句法： ...
复制链接

扫一扫