欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css的外间距如何设置?css外间距的设置方法(附实例)

程序员文章站 2022-03-31 10:54:50
...
css盒模型中有四种元素,分别是内间距、外间距、内容还有边框。这四种定义了盒模型的使用,今天我们就来说说关于css盒模型的外间距的使用吧

css的外间距如何设置?

我们的外间距是属于css盒模型之中的一种,那么现在我们来看看外间距都是怎么设置的吧。

margin: 是一个简写属性,可以一个声明中设置所有外边距属性。

来看个完整外边距的实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double;}
</style>
</head>
<body>
<div class="diyi">
<p>这是一个p标签,是用来使用外边距的</p>
</div>
</body>
</html>

这是一个简单的HTML代码的实例,加了点边框在里面,所以我们看到的效果如图:

css的外间距如何设置?css外间距的设置方法(附实例)

这就是刚才那串代码的效果。

我们现在来看看使用外边距的效果:

<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin-top: auto}
</style>

上面这是用css样式来把p标签上面和div标签中间的距离给取消了,现在看图:

css的外间距如何设置?css外间距的设置方法(附实例)

效果是不是和上面说的一样。

现在我们看看如果把p标签的四个外边距都取消了之后会有什么效果,我们来看看:

<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin: auto}
</style>

代码是不是感觉和上面一样,但是也很明显这是把里面的向上的元素给取消了,所以现在变成了四面外边距都是零了,我们来看看效果吧:

css的外间距如何设置?css外间距的设置方法(附实例)

是不是很明显,所有的外边距都没有了。

但是如果我们想设置外边距的时候该怎么办呢?

也很简单,再来看看实例吧:

<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin:20px}
</style>

这是把所有的外边距都设置成了二十,看的出来吧,那么就来看看效果图吧:

css的外间距如何设置?css外间距的设置方法(附实例)

大家可以很清楚的看到,四周的边框都是为20px。

还可以为单方向设置外边距,比如我们可以看下面这个例子:

<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.diyi{border:solid #D91C1F thin; width: 400px;}
p{border: double; margin-right:20px}
h1{border:double; margin-bottom: 50px}
</style>
</head>
<body>
<div class="diyi">
<h1>这里是PHP中文网</h1>
sdfahsdkjfhksjdhf
<p>这是一个p标签,是用来使用外边距的</p>
</div>
</body>

这个实例是把h1标签加了下方的外边距,边距距离为50px,p标签加了右边的外边距,边距距离为20px。我们来看看效果图:

css的外间距如何设置?css外间距的设置方法(附实例)

是不是很明显,这就是外边距的用法,还可以在一个属性中设置几个外边距。大家都可以上手试试的,都不是很难。

好了,以上就是本篇文章的全部内容了,想看更多就来PHP中文网css学习手册栏目学习。有问题的可以在下方提问。

【小编推荐】

css盒模型的边框用法你知道吗?这里有css盒模型的组成介绍

css伪元素有哪些?css伪元素的详情介绍(内附实例)

以上就是css的外间距如何设置?css外间距的设置方法(附实例)的详细内容,更多请关注其它相关文章!