css 根据不同屏幕设置间距_css的外间距如何设置？css外间距的设置方法（附实例）...-程序员宅基地

技术标签： css 根据不同屏幕设置间距

css盒模型中有四种元素，分别是内间距、外间距、内容还有边框。这四种定义了盒模型的使用，今天我们就来说说关于css盒模型的外间距的使用吧

css的外间距如何设置？

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

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

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

PHP中文网

.diyi{border:solid #D91C1F thin; width: 400px;}

p{border: double;}

这是一个p标签，是用来使用外边距的

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

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

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

.diyi{border:solid #D91C1F thin; width: 400px;}

p{border: double; margin-top: auto}

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

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

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

.diyi{border:solid #D91C1F thin; width: 400px;}

p{border: double; margin: auto}

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

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

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

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

.diyi{border:solid #D91C1F thin; width: 400px;}

p{border: double; margin:20px}

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

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

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

PHP中文网

.diyi{border:solid #D91C1F thin; width: 400px;}

p{border: double; margin-right:20px}

h1{border:double; margin-bottom: 50px}

这里是PHP中文网

sdfahsdkjfhksjdhf

这是一个p标签，是用来使用外边距的

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

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

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

【小编推荐】

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

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

本文链接：https://blog.csdn.net/weixin_42306688/article/details/113027271

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

软件测试流程包括哪些内容？测试方法有哪些？_测试过程管理中包含哪些过程-程序员宅基地

文章浏览阅读2.9k次，点赞8次，收藏14次。测试主要做什么？这完全都体现在测试流程中，同时测试流程是面试问题中出现频率最高的，这不仅是因为测试流程很重要，而是在面试过程中这短短的半小时到一个小时的时间，通过测试流程就可以判断出应聘者是否合适，故在测试流程中包含了测试工作的核心内容，例如需求分析，测试用例的设计，测试执行，缺陷等重要的过程。..._测试过程管理中包含哪些过程

政府数字化政务的人工智能与机器学习应用：如何提高政府工作效率-程序员宅基地

文章浏览阅读870次，点赞16次，收藏19次。1.背景介绍政府数字化政务是指政府利用数字技术、互联网、大数据、人工智能等新技术手段，对政府政务进行数字化改革，提高政府工作效率，提升政府服务质量的过程。随着人工智能(AI)和机器学习(ML)技术的快速发展，政府数字化政务中的人工智能与机器学习应用也逐渐成为政府改革的重要内容。政府数字化政务的人工智能与机器学习应用涉及多个领域，包括政策决策、政府服务、公共安全、社会治理等。在这些领域，人工...

ssm+mysql+微信小程序考研刷题平台_mysql刷题软件-程序员宅基地

文章浏览阅读219次，点赞2次，收藏4次。系统主要的用户为用户、管理员，他们的具体权限如下：用户：用户登录后可以对管理员上传的学习视频进行学习。用户可以选择题型进行练习。用户选择小程序提供的考研科目进行相关训练。用户可以进行水平测试，并且查看相关成绩用户可以进行错题集的整理管理员：管理员登录后可管理个人基本信息管理员登录后可管理个人基本信息管理员可以上传、发布考研的相关例题及其分析，并对题型进行管理管理员可以进行查看、搜索考研题目及错题情况。_mysql刷题软件

根据java代码描绘uml类图_Myeclipse8.5下JAVA代码导成UML类图-程序员宅基地

文章浏览阅读1.4k次。myelipse里有UML1和UML2两种方式，UML2功能更强大，但是两者生成过程差别不大1.建立Test工程，如下图，uml包存放uml类图package com.zz.domain;public class User {private int id;private String name;public int getId() {return id;}public void setId(int..._根据以下java代码画出类图

Flume自定义拦截器-程序员宅基地

文章浏览阅读174次。需求：一个topic包含很多个表信息，需要自动根据json字符串中的字段来写入到hive不同的表对应的路径中。发送到Kafka中的数据原本最外层原本没有pkDay和project，只有data和name。因为担心data里面会空值，所以根同事商量，让他们在最外层添加了project和pkDay字段。pkDay字段用于表的自动分区，proejct和name合起来用于自动拼接hive表的名称为 ..._flume拦截器自定义开发 kafka

java同时输入不同类型数据,Java Spring中同时访问多种不同数据库-程序员宅基地

文章浏览阅读380次。原标题：Java Spring中同时访问多种不同数据库多样的工作要求，可以使用不同的工作方法，只要能获得结果，就不会徒劳。开发企业应用时我们常常遇到要同时访问多种不同数据库的问题，有时是必须把数据归档到某种数据仓库中，有时是要把数据变更推送到第三方数据库中。使用Spring框架时，使用单一数据库是非常容易的，但如果要同时访问多个数据库的话事件就变得复杂多了。本文以在Spring框架下开发一个Sp..._根据输入的不同连接不同的数据库