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伪元素的详情介绍(内附实例)
智能推荐
软件测试与质量保证笔记_《软件质量保证与测试》 软件缺陷定义和特征?软件缺陷产生的原因有哪些?-程序员宅基地
文章浏览阅读624次。软件测试与质量保证主流测试技术主流测试技术_《软件质量保证与测试》 软件缺陷定义和特征?软件缺陷产生的原因有哪些?
6678 emif norflash加载-程序员宅基地
文章浏览阅读677次。 终于搞定，纪念一下。CCS6很不好用，还是换回CCS5.5吧！转载于:https://www.cnblogs.com/fpga/p/3760389.html_6678 低温下 引导程序pc
echarts地图api series_基于Echarts的中国地图数据展示-程序员宅基地
文章浏览阅读560次。一、概述实际项目中大概率会遇到很多需要进行数据展示的地方，如折现图，柱状图等，今天给大家介绍一个更加炫酷的中国地图大数据展示，结合echarts免费开源第三方插件，可以实现自己的定制样式，定制提示。二、演示效果三、目录结构项目构成：引用：四、详细步骤1、首先给定一下全局样式、给个地图容器*{margin:0;padding:0}html,body{width:100%;height:100%;}#..._地图option = { series
十大移动开发平台_webbuilder是免费的吗-程序员宅基地
文章浏览阅读8.9k次，点赞2次，收藏7次。1. Putdb WebBuilder WebBuilder是一款开源的可视化移动Web应用开发和运行平台。基于浏览器的集成开发环境，可视化和智能化的设计，能轻松完成常规应用和面向手机的移动应用开发；高效、稳定和可扩展的特点，适合复杂企业级应用的运行；跨平台、数据库和浏览器的架构，适应复杂的服务器和客户端环境；包括智能数据库访问在内的多项先进技术，使应用系统的开发更快捷和简单。 ..._webbuilder是免费的吗
RS485硬件标准1-电平定义_485端口正负电压-程序员宅基地
文章浏览阅读1.5k次。RS485标准是为了弥补RS232通信距离短、速率低等缺点而产生的而产生的，该接口标准只规定了电气特性，并没有规定接插件，传输电缆和 应用层通信协议。RS485标准与RS232不一样，数据信号采用差分传输方式。所谓差分传输，就是发送端在两条信号线上传输幅值相等，相位相反的电信号，接收端对接收的两条线信号做 减法运算，这样就获得幅值翻倍的信号。RS485上的两根线定义为A、..._485端口正负电压
centos mysql 端口,CentOS 上mysql端口3306的问题-程序员宅基地
文章浏览阅读200次。CentOS 上mysql端口3306的问题今天装了一台Linux系统，以前都是RedHat，后来听说有Fedora了，一直没用过。正好项目里环境要用就想弄一个来玩玩，结果现在人家最新的是CentOS，就一张CD，其他的根据需要自己上网Down，(我不喜欢这样子就自己下载DVD版)。安装完之后没有图形界面，而且没有提示输入root密码，还得到单用户模式下修改。后来下载了一个图形界面，弄好之后在那个..._centos修改mysql端口tcp6:3306为tcp
随便推点
基于ArcGIS10.0和Oracle10g的空间数据管理平台十二（C#开发）-元数据库库管理-程序员宅基地
文章浏览阅读52次。我的新浪微博：http://weibo.com/freshairbrucewoo。欢迎大家相互交流，共同提高技术。 由于前段时间工作很忙而且出差去了北京一个多月，所以很久没有介绍了关于基于ArcGIS10.0和Oracle10g的空间数据管理平台这个项目的相关功能实现了，今天开始介绍一个新的功能实现，就是元数据库的管理。 所谓元数据就是描述数据的数据，元数据库就...
C语言程序设计学习笔记：P9-指针_以下哪个打印指针地址的写法是正确的-程序员宅基地
文章浏览阅读2.8k次，点赞14次，收藏38次。本系列文章为浙江大学翁恺C语言程序设计学习笔记，前面的系列文章链接如下：C语言程序设计学习笔记：P1-程序设计与C语言C语言程序设计学习笔记：P2-计算C语言程序设计学习笔记：P3-判断C语言程序设计学习笔记：P4-循环C语言程序设计学习笔记：P5-循环控制C语言程序设计学习笔记：P6-数据类型C语言程序设计学习笔记：P7-函数C语言程序设计学习笔记：P8-数组文章目录一、指针1.1 取地址运算1.2 指针1.3 指针的使用1.4 指针与数组1.4 指针与const小测验二、指针运算2._以下哪个打印指针地址的写法是正确的
谷歌地图控件，通过扩展实现GMAP的自定义绘图系统-程序员宅基地
文章浏览阅读251次。 这两天搞网络规划和优化系统，需要开发一套地图，并在地图上放置自定义图标，和放置复杂贴图，或画矩形多边形等随着地图移动和放缩。这件事情一开始搞得很痛苦，通过GMAP.NET开发，并使用了CodeProject上面的drawtools工具（有兴趣可以自行搜索，博客园也有相关的文章讨论），但就是没法实现随地图移动而移动，仿佛是浮在地图上的。最后这种方法只能放弃。 看了几个博客上面讨论的..._gmap tooltip 背景透明
[源码解析] 机器学习参数服务器ps-lite 之(3) ----- 代理人Customer-程序员宅基地
文章浏览阅读469次。本文是参数服务器第三篇，介绍ps-lite的Customer模块。
卷积神经网络笔记--吴恩达深度学习课程笔记（四）_卷积神经 特征平面-程序员宅基地
文章浏览阅读2.8k次，点赞4次，收藏17次。各个知识点详解LeNet-5网络LetNet网络的的讲解主要参考1998年计算机科学家Yann LeCun发布的一篇论文《Gradient based learning applied to document-recognition》大家可以找到这篇论文结合学习，针对该网络，首先大家需要了解一下图像中的常用操作卷积，卷积这个词是信号处理领域的词，表示一个系统多数据处理的过程，在图像处理中的卷积，其实就是滤波器。下面先简要介绍一下卷积核的概念，这个不能细说，因为想要深入理解卷积需要很多知识，这里只给大家_卷积神经 特征平面
ANSYS无限大平板两边传热仿真_ansys热仿真-程序员宅基地
文章浏览阅读5.1k次，点赞4次，收藏20次。ANSYS无限大平板两边传热仿真有一无限大平板，导热系数为27.56，密度为591.8，密度为7800，厚度为1.08m，现将其划分为4层，5个温度节点，求分析其在两面不相等且温度变化的对流换热中的受热情况。对流换热系数为200。一、前处理器1、建立工程，改变工程名称2、选择处理热问题，勾选Thermal选项3、选择需要划分的节点类型，这里采用55节点若计算对称问题，则在o..._ansys热仿真