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. 一个跳转提示页面---JS

    //一个跳转提示页面   <script type="text/javascript">   var s=5;     function go(){        do ...

  2. python调用caffe实现预测

    对于已经训练完成的caffemodel,对于单个的图片预测,用python接口来调用是一件非常方便的事情,下面就来讲述如何用python调用已经训练完成的caffemodel,以及prototxt,网 ...

  3. 无根树同构_hash

    先贴上地址 https://vjudge.net/problem/HDU-5732 判断有根树同构: 1. 直接用括号最小表示法 2. 利用括号最小表示法的思想进行hash 判断无根树同构: 1. 找 ...

  4. Mariadb-10.1.22配置项

    ## These groups are read by MariaDB server.# Use it for options that only the server (but not client ...

  5. Unity 3D Shader流水线

    Unity开发VR之Vuforia 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  6. HDU - 5157 :Harry and magic string (回文树,求多少对不相交的回文串)

    Sample Input aca aaaa Sample Output 3 15 题意: 多组输入,每次给定字符串S(|S|<1e5),求多少对不相交的回文串. 思路:可以用回文树求出以每个位置 ...

  7. PAT-L2-006(根据后序中序遍历建立树)

    #include <bits/stdc++.h> using namespace std; ; queue <int> q; int a[N]; int b[N]; int n ...

  8. python 闭包和迭代器

    一  函数名的运用:(函数名是一个变量,但它是一个特殊变量,与括号配合可以执行变量. (1) 函数名可以赋值给其他变量 def chi(): print("吃月饼") fn=chi ...

  9. java-接口的成员特点

    1.成员变量: - 只能是常量,并且是静态的.公共的. - 默认修饰符:public static final - 建议:自己手动给出. 2.构造方法:接口没有构造方法. 3.成员方法: - 只能是抽 ...

  10. exception in thread "http-apr-80-exec-24" java.lang.OutOfMemoryError:PermGen...

    今天客户说项目访问不了了,我急忙看了下告警,发现上报:“exception in thread "http-apr-80-exec-24" java.lang.OutOfMemor ...