下面的示例演示可用于将边距应用于任何HTML元素的各种CSS属性。
边距定义元素周围的空间。CSS边距的指定方式与边框类似-它们可以为每一侧单独设置,也可以一次为所有边设置。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
设置所有边距
<!DOCTYPE html> <title>Example</title> <style> div { border: 1px solid orange; } div > p { background: gold; margin: 20px; } </style> <div> <p> 该文本在所有四个面上都有20个像素的边距。它嵌套在带有边框的div中,以便更容易看到边距的效果。 </p> </div>
设置每侧的边距
如果不希望将边距设置应用于所有四条边,或者希望每条边应用不同的边距,则可以使用以下属性:文章源自淘咖首码项目网-https://www.youranweb.com/259.html
- 上边距:margin-top
- 右边距:margin-right
- 边距-底部:margin-bottom
- 左边距:margin-left
例:
<!DOCTYPE html> <title>Example</title> <style> p { background: gold; } .left-margin { margin-left: 60px; } </style> <p class="left-margin"> This text has a left margin of 60 pixels. </p> <p> This text has no left margin set. </p>
速记属性
此方法使用速记属性在一个位置设置上边距:margin-top、右边距:margin-right、下边距:margin-bottom和左边距:margin-left。此方法更快。它还比以前的方法使用更少的代码。实际上,它与我们在第一个示例中使用的属性相同(即margin属性)。唯一的区别是我们对它应用多个值。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
<!DOCTYPE html> <title>Example</title> <style> div { border: 10px solid lightblue; } div > p { border: 1px dotted orange; margin: 20px 50px 10px 30px; } </style> <div> <p> 此文本的每一面都有不同大小的边距。它嵌套在带有边框的“div”中,以便于查看边距的效果。 </p> </div>
变化
您不需要为所有四条边提供不同的值。可以提供一个、两个、三个或四个值。以下是它的工作原理:文章源自淘咖首码项目网-https://www.youranweb.com/259.html
如果只有一个值,则它适用于所有边。如果有两个值,则上边距和下边距设置为第一个值,右边距和左边距设置为第二个值。如果有三个值,则顶部设置为第一个值,左侧和右侧设置为第二个值,底部设置为第三个值。如果有四个值,它们将分别应用于顶部、右侧、底部和左侧。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
换句话说:文章源自淘咖首码项目网-https://www.youranweb.com/259.html
边距:10像素;文章源自淘咖首码项目网-https://www.youranweb.com/259.html
所有四条边的边距均为10像素。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
边距:10像素20像素;文章源自淘咖首码项目网-https://www.youranweb.com/259.html
顶部和底部的边距为10像素。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
左右两边距为20像素。文章源自淘咖首码项目网-https://www.youranweb.com/259.html
边距:10像素20像素30像素;文章源自淘咖首码项目网-https://www.youranweb.com/259.html
顶部是10px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
左边和右边是20px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
底部为30px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
边距:10像素20像素30像素40像素;文章源自淘咖首码项目网-https://www.youranweb.com/259.html
顶部是10px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
右边是20px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
底部为30px文章源自淘咖首码项目网-https://www.youranweb.com/259.html
左边是40px文章源自淘咖首码项目网-https://www.youranweb.com/259.html

评论