css中如何设置两个图片之间的距离

发布网友发布时间：2022-04-19 21:03

我来回答

共6个回答

懂视网时间：2022-04-06 15:04

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代码的实例，加了点边框在里面，所以我们看到的效果如图：

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

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

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

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

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

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

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

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

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

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

也很简单，再来看看实例吧：

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

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

大家可以很清楚的看到，四周的边框都是为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。我们来看看效果图：

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

好了，

热心网友时间：2022-04-06 12:12

1、css设置图片距离可以用盒子模型的margin属性。操作方法首先用html编辑器新建一个html文件，里面放入几张图片：

2、然后在上方的style中设置css的样式，设置img的margin属性为“0 30px”即可，其中前一个数字表示上下的距离，后一个数字表示左右的距离。最后在调整统一一下图片的大小，方便观察效果：

3、最后打开浏览器，就会看到2张图片之间是有距离的效果了：

热心网友时间：2022-04-06 13:30

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。所以两个图片之间的距离可以用外边距（margin）来实现：

margin: top right bottom left;

示例：假设页面中放置了2行共6张图片

如果通过css设置图片边距为零，则效果如下

img{margin:0;}

如果通过css设置图片各个方向的距离相等为10px，则效果如下

img{margin:10px;}

如果通过css设置图片不等距离：上下20px，左右10px，则效果如下

img{margin:20px 10px;}

热心网友时间：2022-04-06 15:05

可以通过内边距和外边距来设置
分别是padding和margin

css中padding和margin的区别

margin 外边距
border 边框
padding 内边距
也就是说设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面

热心网友时间：2022-04-06 16:56

有许多办法，图片可以放在div也可以放在table也可以放在ul、ol，可以用margin也可以用padding调节距离，也可以用clear:both清除两边，想学更多，你找我啊，我只要会的就告诉你。

热心网友时间：2022-04-06 19:04

img{padding:5px;}

全部栏目

css中如何设置两个图片之间的距离