网站制作教程:CSS 边距属性

你的网络首码项目网 网站建设来源:你的网络首码项目网评论236字数 1260阅读模式

下面的示例演示可用于将边距应用于任何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

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论