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. Spring Boot 揭秘与实战 自己实现一个简单的自动配置模块

    文章目录 1. 实战的开端 – Maven搭建 2. 参数的配置 - 属性参数类 3. 真的很简单 - 简单的服务类 4. 自动配置的核心 - 自动配置类 5. spring.factories 不要 ...

  2. Spring Boot 揭秘与实战(九) 应用监控篇 - 自定义监控端点

    文章目录 1. 继承 AbstractEndpoint 抽象类 2. 创建端点配置类 3. 运行 4. 源代码 Spring Boot 提供的端点不能满足我们的业务需求时,我们可以自定义一个端点. 本 ...

  3. undefined is not an object (evaluating '_react2.PropTypes.string')

    对所引用的组件原 .import React, {Component,PropTypes} from 'react' 改成:import React, {Component} from 'react' ...

  4. 11.2.0.4单实例DRCP(Database Resident Connection Pooling)简单测试

    DRCP配置及测试 一. DRCP介绍 数据库提供会话进程在数据库中使用资源的方式: 1)Dedicated Server,一个会话在数据库中对应一个专有进程,一对一服务(资源数据库占用过多,一般使用 ...

  5. Gym-101653:acific Northwest Regional Contest (2019训练第一场)

    本套题没有什么数据结构题,图论题,唯一有价值的就是Q题博弈,在最后面,读者可以直接拉到最下面. (还剩下两个,估计每什么价值的题,懒得补了 M .Polyhedra pro:欧拉公式,V-E+F=2: ...

  6. 20155208徐子涵 2016-2017-2 《Java程序设计》第2周学习总结

    20155208徐子涵 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第三章 基础语法 3.1 类型.变量与运算符 • 关键字:在定义java文件名的时候要 ...

  7. day 016 面向对象---类与类的关系

    ---恢复内容开始--- 一  依赖关系(最轻的一种关系,在方法中引入另一个类的对象) class Elephant: def __init__(self,name): self.name=name ...

  8. PTA——模拟除法

    PTA 7-42 整除光棍 #include <stdio.h> int main() { ];//创建存表 ,count=; int n; ; scanf("%d", ...

  9. PTA——各位数之和

    PTA 7-28 求整数的位数及各位数字之和 我的程序: #include<stdio.h> #include<math.h> int main(){ ,t; scanf(&q ...

  10. 无用之学matplotlib,numpy,pandas

    一.matplotlib学习 matplotlib: 最流行的Python底层绘图库,主要做数据可视化图表,名字取材于MATLAB,模仿MATLAB构建 例子1: # coding=utf- from ...