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. 【Python】基础练习题-1

    #练习1:从键盘输入两个数,并比较其大小,直到输入e/E退出程序 while 1: input_number=raw_inut("please input two numbers,enter ...

  2. JavaScript 是如何工作的: 事件循环和异步编程的崛起 + 5个如何更好的使用 async/await 编码的技巧 - 学习笔记

    那么,谁会告诉 JS 引擎去执行你的程序?事实上,JS 引擎不是单独运行的 —— 它运行在一个宿主环境中,对于大多数开发者来说就是典型的浏览器和 Node.js.实际上,如今,JavaScript 被 ...

  3. js--未来元素

    通过动态生成的标签,在生成标签直接绑定事件是无效的. eg:html标签 <div id="tree"> </div> <script> $(' ...

  4. useradd密码无效

    /********************************************************************** * useradd密码无效 * 说明: * 在测试Ubu ...

  5. ZOJ - 4081:Little Sub and Pascal's Triangle (结论)

    Little Sub is about to take a math exam at school. As he is very confident, he believes there is no ...

  6. ORB(oriented FAST and rotated BRIEF)特征提取与检测

    ORB采取FAST算法检测特征点,采取BRIEF算法计算特征点描述子. 1.检测特征点 检测候选特征点周围一圈的像素值,若有足够多的像素值与候选特征点的差异都较大,则认为该候选特征点是特征点. 对于上 ...

  7. IIS 7上导入SSL证书

    1.将SSL证书文件上传至服务器 2.导入证书 1)在IIS设置项中,打开‘服务器证书’ 2)选择导入 3)将网站绑定SSL证书

  8. PS学习之制作音乐视屏

    素材: 新建画布 插入图片素材 调整和画布一样大小 喜欢彩色的 可以加照片滤镜 喜欢黑白的可以加黑白滤镜 也可以添加自己喜欢的文字 在窗口中选择时间轴 创建视屏时间轴 图中标记得就是每秒能播放30张 ...

  9. C++学习(三)(C语言部分)之 基本数据类型

    基本数据类型 上期回顾 stdlib.h system,命令release MT导入ico文件 基本数据类型 整数 int浮点型(小数 实型) float double字符型 char 变量 常量速度 ...

  10. linux服务器进程信息查看命令

    #lsof 列出当前系统打开文件,常与-i选项使用,用于查看某个端口被哪个程序占用 [root@bogon ~]# lsof -i:80 COMMAND PID USER FD TYPE DEVICE ...