padding:内边距

margin:外边距

内外边距是针对本标签相对于它相邻的标签而言。

  margin: 10px;是本标签与它周围上下左右有10像素的空白。

  padding: 10px;本标签其实与它周的标签是紧贴着的,是本标签的边界与本标签的内容有10像素背景颜色距离。

  它们都有单独的margin-top left right bottom区别

<div style="width: 500px;border: 1px solid red;">
<div style="height: 160px;width: 160px;border: 1px solid green;">1</div>
<div style="background-color: rebeccapurple;margin: 10px;">2</div>
<div style="background-color: rebeccapurple;padding-top: 10px;">2</div>
</div>

  margin: 0 auto;的用法,几乎所有的网站都是这样用的,让抬头居中对齐,auto就是左右距离自动的意思.

<div class="pg-header">
<div style="width: 980px;margin: 0 auto;">
<div style="float: left;">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both;"></div>
</div>
</div>

  


padding margin的更多相关文章

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

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

  2. CSS之padding&margin

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  4. Html的Padding,Margin自己理解图

    Html的Padding,Margin自己理解图.

  5. css之display样式,padding,margin

    1. 块级标签变成行内标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

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

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

  7. JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)

    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与  Margin 的宽度,四个加起来才是 di ...

  8. CSS padding margin border属性详解

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

  9. 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

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

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

随机推荐

  1. HDU 6098 17多校6 Inversion(思维+优化)

    Problem Description Give an array A, the index starts from 1.Now we want to know Bi=maxi∤jAj , i≥2. ...

  2. ECONOMETRICS CHAPTER3

    前几天看王垠的一篇文章谈数学与编程,说数学公式之所以难以理解是因为缺乏统一的形式,而且经常有未定义的变量出现.看这本书时也正有此感,所以有时不必要拘泥公式是否前后一致,理解意思要紧. ♣普通最小二乘法 ...

  3. webgl,threejs教程、笔记

    发现一个不错的博客,学学. webgl和threejs教程

  4. 【转载】 OpenCV ——双线性插值(Bilinear interpolation)

    原文地址: https://www.cnblogs.com/yssongest/p/5303151.html --------------------------------------------- ...

  5. 一个简单的 IDA f5插件问题分析

    有人提出问题,以下汇编f5结果缺失代码: .text:00000C18 Java_com_a_b_c .text:00000C18 PUSH {R3,LR} .text:00000C1A CMP R2 ...

  6. 密码安全存储——PBKDF2、bcrypt、scrypt

    密码用单向哈希存储保证了数据库被脱后用户密码的安全. 由于彩虹表这种攻击方式的存在,一般认为md5,SHA1等单向算法的安全性是不够的.那如何选择合适的加密算法? 下面介绍业界几种高强度单向哈希算法, ...

  7. Django之模板层-语法:{{ }}

    模版语法的深度查询(.) views.py def index(request): name = 'name' lis = [1,2,3,4,5,6] dic = {"name": ...

  8. 【计算机视觉】欧拉角Pitch/Yaw/Roll

    Pitch: 俯仰角: Yaw: 偏航角或者航向角: Roll: 横摆角或者翻滚角: 这几个角度是这样定义的,至于坐标系不同,则对应不同的XYZ轴及其方向: 1. https://en.wikiped ...

  9. Java中的break和continue以及标签

    一.Java中的break,continue,goto 首先break,continue是Java中的关键字,而goto是保留字. 基于goto在c和c++中的鬼畜表现,我觉得goto可能还会长期在J ...

  10. Angular 201703

    $http vm.auth = function() { return $http({ method: 'POST', url: 'sys/auth.json' }) } service.auth() ...