贴图吧，图一眼明了。

无效果时候有

只有一个<div>啦啦啦</div>

只有padding时候有：

padding详细设计时：

解释：padding是对内的，如padding-left:10px是距离左边的的距离为10px,即相对于背景

只有margin时：

margin详细设计时：

解释：margin是对外的，它调整的整体，如margin-left:30px是距离浏览器的左边30px

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

两个嵌套

<div class="a">

　　<div class="b"></div>

</div>

无效果时：

只有padding时：

padding详细设计时

这里的padding只是为内边框添了一块距离（注意这里的padding是写在b里面的），如padding-left：2px就是为内边框在左边添了2px的边境，（padding效果并不明显╮(╯▽╰)╭）

只有margin时：

margin详细设计时：

这里的margin只是保证了内部边框相对于外边框的距离（注意这里的margin的也写在b里面），如margin-left：30px使得内边框距离外边框的距离为30px

妙点领悟：小实例的应用，相册。相册周边的白边可以用padding来设置，宽度则有px决定，另外设置阴影等，而margin用来确定相册整体相对于浏览器的位置。

补充：

代码：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>内外边距详解</title>

     <style type="text/css">

         .text_a {

             margin-top: 10px;

             padding-top: 10px;

             border: 2px solid #ff0000;

         }

         .text_b {

             margin-top: 10px;

             padding-top: 10px;

             border: 2px solid #0000ff;

         }

         .text_b_son {

             margin-top: 10px;

             padding-top: 10px;

             border: 2px solid green;

         }

     </style>

 </head>

 <body>

 <div class="text_a">text_a</div>

 <div class="text_b">text_b

     <div class="text_b_son">text_b_son</div>

 </div>

 </body>

 </html>

生成的图片为：

常见问题，布局时候，常遇到摆放位置的问题。这时候就应该用padding（内边距）和margin（外边距）来进行调整。

　　应注意，如图中当摆放text_b_son在text_b中的位置时候，先用margin来调整自己的位置，再用padding来调节自己在父类框的位置。

　　　　　　当然不要忽略了float（浮动）的作用，首先浮动，再调节位置。

css关于内外边距的详细解释的更多相关文章

  1. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  2. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  3. css样式之边框和内外边距

    1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...

  4. 学习微信小程序之css11内外边距集合

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

  5. Android UI系列-----长度单位和内外边距

    这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑 ...

  6. CSS Margin（外边距）

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

  7. css3-8 内外边距中的注意要点有哪些

    css3-8 内外边距中的注意要点有哪些 一.总结 一句话总结:padding,border都是外延的.margin会合并. 1.两元素样式都有margin:15px,他们中间的距离是15px还是30 ...

  8. css内外边距属性

    盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...

  9. CSS 内外边距 float positio属性

    一.外边距和内边 margin:            用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding:   ...

随机推荐

  1. TCP协议要点和难点全解

    转载自http://www.cnblogs.com/leetieniu2014/p/5771324.html TCP协议要点和难点全解 说明: 1).本文以TCP的发展历程解析容易引起混淆,误会的方方 ...

  2. 开发者眼中的Spring与JavaEE

    JavaEE与Spring 在Java社区中,Spring与Java EE之争是个永恒的话题.在这场争论中,来自两个阵营的布道师.架构师 与铁杆粉丝都在不遗余力地捍卫着本方的尊严,并试图说服对方加入到 ...

  3. [note]CRT&exCRT

    中国剩余定理 别人的blog 假设现在有关于x的同余方程组(p1,p2均为质数) \(x=a_1\pmod {p_1}\) \(x=a_2\pmod {p_2}\) 可以转化成如下形式 \(x=a_1 ...

  4. struts2 获取表单数据封装到list和map集合

    一.获取封装表单数据到list集合 示例 获取用户输入的用户名和密码并输出用户名. jsp页面 list[0]表示list中的第一个user对象 Java代码 二.封装表单数据到map集合 示例 获取 ...

  5. ZOJ - 3537 Cake (凸包+区间DP+最优三角剖分)

    Description You want to hold a party. Here's a polygon-shaped cake on the table. You'd like to cut t ...

  6. 12.Django数据库操作（执行原生SQL）

    1.使用extra方法 解释:结果集修改器,一种提供额外查询参数的机制 说明:依赖model模型 用在where后: Book.objects.filter(publisher_id="1& ...

  7. action extension添加图标

    最近在做ios的action extension,这里记录一下添加图标的方法. 在Action Extension的target里面的Build Settings,里面的Asset Catalog C ...

  8. hd acm1008

    Problem Description The highest building in our city has only one elevator. A request list is made u ...

  9. [算法]打印N个数组的整体最大Top K

    题目: 有N个长度不一的数组,所有的数组都是有序的,请从大到小打印这N个数组整体最大的前K个数. 例如: 输入含有N行元素的二维数组代表N个一维数组. 219,405,538,845,971 148, ...

  10. mono上运行程序常见问题

    1. System.BadImageFormatException: Invalid method header local vars signature token 0x 65d5b2File na ...