margin:

margin:5px auto;意思上下为5,左右平均居中
margin-top: 20px; 上外边距                        
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距                                                      
margin-left: 20px; 左外边距
margin:1px 四边统一边距
margin:1px 1px 上下边距,左右边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距
注释：允许使用负值。
例子
1.margin:10px 5px 15px 20px;上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2margin:10px 5px 15px;上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3margin:10px 5px;上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4margin:10px;所有 4 个外边距都是 10px
 
pading:

padding-top:20px;上内边距
padding-right:30px;右内边距
padding-bottom:30px;下内边距
padding-left:20px;左内边距
padding:1px四边统一内边距
padding:1px1px上下,左右内边距
padding:1px1px1px上,左右,下内边距
padding:1px1px1px1px上,右,下,左内边距
注释：不允许使用负值。

其实说白了padding就是内容与边框的空隙.而margin 则是模块与模块的空隙

CSS属性(pading margin)的更多相关文章

  1. CSS属性之margin

    0.对自身可视宽度的影响 1>改变处于标准文档流中,未设置width值的block元素的可视宽度 在标准文档流中,对于没有设置宽度的block元素,当其具有内容或者设置高度后,其自身宽度为父元素 ...

  2. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  3. 图解CSS的padding,margin,border属性

    原文出处:http://hi.baidu.com/sonan/item/af05cf8759810d1cc31627d5 觉得不错,保存以备用. --------------------------- ...

  4. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  5. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  6. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  7. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. 解说css中的margin属性缩写方式

    <html> <body> <div style="border: 1px solid red;"> <div style="b ...

  9. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

随机推荐

  1. phpfpm开启pm.status_path配置，查看fpm状态参数

    php-fpm配置 pm.status_path = /phpfpm_status nginx配置 server {    root /data/www;    listen 80;    serve ...

  2. Markov logic network

    A Markov logic network (or MLN) is a probabilistic logic which applies the ideas of a Markov network ...

  3. NetCore WebApi使用Jwtbearer实现认证和授权

    1. 什么是JWT? JWT是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以Json对 ...

  4. androidstudio出包问题--Warning: there were 1 unresolved references to classes or interfaces.

    问题:存在unresolved的类或接口导致打包失败 Warning: there were 1 unresolved references to classes or interfaces. You ...

  5. 非常好用的vue数字滚动插件vue-countTo

    参考链接:https://blog.csdn.net/gaoxin666/article/details/84635056

  6. 使用Python执行dos命令并获取输出的结果

    import os import subprocess # 第一种 result1 = subprocess.check_output('dir').decode('GBK') print(resul ...

  7. pramfs安装

    1. 拷贝 linux-3.11 pramfs-1.5.0-3.11 pramfs-Tools 到电脑中(我是新建目录linux中) 2.解压 3.cd pramfs-1.5.0-3.11/ 4.将p ...

  8. PHP抽奖代码。亲测可用

    $prize_arr = array( '0' => array('id' => 1, 'title' => 'iphone5s', 'v' => 5), '1' => ...

  9. 阅读《C Primer Plus》收获

    190927 知识内容: 1.了解到C语言混乱代码大赛.评选谁的程序最有创意但又让人难以理解 2.了解最初的c语言的规则,所有编译器依照规则而设计. 3.编程前先要确定好目标对象,并且在纸上大概写出流 ...

  10. CrawlerRunner没有Log输出

    官网log说明:https://docs.scrapy.org/en/latest/topics/logging.html#scrapy.utils.log.configure_logging 这里记 ...