贴图吧，图一眼明了。

无效果时候有

只有一个<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. Inno Step教程

    最近为js页面做了几个activex控件(只能ie内核浏览器使用),最后要完成打包,之前一直使用winrar的自解压包实现,现在改用Inno Step来做. 工具使用还是比较简单的,语法使用Inno ...

  2. Django 事务

    Django事务 事务是通过将一组相关操作组合为一个,要么全部成功要么全部失败的单元,可以简化错误恢复并使应用程序更加可靠.事务具有4个特性:原子性.一致性.隔离性.持久性. 默认情况下,在Djang ...

  3. Android动画效果animation

    1.Tween 根据指定动画开始和结束时的对象属性(位置.Alpha值(透明度).大小.角度等)以及动画播放的时间长度生成动画: 2.Frame 指定每一帧所播放的图片和时间长度.   建立动画的方法 ...

  4. link_to嵌套

    = link_to theses_path, :class=>"btn" do .text-center 购买

  5. [笔记]几个简单有用的PHP函数

    收藏几个简单的PHP函数,分别用于对象到数组转换.json到php数组转换功能.curl模拟POST以及根据链接获取内容.不直接使用json_decode()的原因是php json_decode() ...

  6. es6对象内函数的两种写法

    es6对象内函数一般有两种写法: var person1 = { name: "p1", sayThis() { console.log(this); } }; var perso ...

  7. 07 09&10

    0709: 排名还是不高,毕竟没切出来题. 第一题dalao: 要求你做一个三维数点,只回答最终有多少个点对的状态是完全小于(可比?)的.(n<=2000000) 特殊限制是三维都是随机排列. ...

  8. 暑假集训第一周比赛G题

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=83146#problem/G G - 向 Crawling in process... C ...

  9. 算法（Algorithms）第4版 练习 2.2.11（3）

    关键代码实现: public static void sort(Comparable[] input) { int N = input.length; aux = input.clone();//mu ...

  10. 英语发音规则---ea字母组合发音规律

    英语发音规则---ea字母组合发音规律 一.总结 一句话总结:字母组合ea的发音规律,在学习字母组合在单词中的发音规律以前,一定要熟练撑握什么是开音节,什么是闭音节,否则你就不撑握这些发音规律. ea ...