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】requests.post请求注册实例

    #encoding=utf-8 import requests import json import time import random import multiprocessing from mu ...

  2. SQL注入之Sqli-labs系列第二十九关(基于WAF防护的单引号报错注入)

    开始挑战第二十九关(Protection with WAF) 0x1查看源码 (1)login.php页面存在防护,只要检测到存在问题就跳转到hacked.php页面(其他信息看备注) 0x2 for ...

  3. Redis过期策略(转)

    1.设置过期时间 expire key time(以秒为单位)--这是最常用的方式 setex(String key, int seconds, String value)--字符串独有的方式 具体的 ...

  4. 20155219&20155224 《信息安全系统设计基础》实验一 开发环境的熟悉

    实验内容 实验两人一组,最多三人一组 可以使用自己的笔记本,也可以使用实验室台式机 使用实验箱作为超级终端. 实验中学到的知识点 交叉编译 宿主机与目标机 NFS 超级终端 file命令 实验步骤 实 ...

  5. C++ 的简单输出输入 HDU 1089~1096

    A+B for Input-Output Practice (I) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...

  6. CentOS上部署JAVA服务【转】

    http://www.th7.cn/Program/java/201511/686437.shtml 本文将介绍如何在CentOS上运行Java Web服务,其中将包括如何搭建JAVA运行环境.如何开 ...

  7. eclipse + cdt

    Window > Preferences > General > Appearance中设置主题颜色. Help > eclipse marketplace > find ...

  8. ODOO区分测试库和正式库的简单方法

    ODOO区分测试库和正式库的简单方法.1. 打开 开发者模式,右上角能显示数据库名称,缺点是,太耗系统资源了,数据多的时候就明显感觉慢了.2. 安装社区的显示测试帐套的模块, 若是正式环境还是尽量少装 ...

  9. hdu4059 The Boss on Mars 容斥原理

    On Mars, there is a huge company called ACM (A huge Company on Mars), and it’s owned by a younger bo ...

  10. hdu2594 Simpsons’ Hidden Talents LCS--扩展KMP

    Homer: Marge, I just figured out a way to discover some of the talents we weren’t aware we had.Marge ...