贴图吧，图一眼明了。

无效果时候有

只有一个<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. Webpack探索【7】--- sourceMap、自动构建刷新功能详解

    本文主要讲sourceMap.自动构建刷新功能.

  2. hdoj 1455 Sticks 【dfs】

    题意:找最短的木棍可以组成的长度, hdoj  1518 的加强版 代码: #include <stdio.h> #include <string.h> #include &l ...

  3. HTTP 304 详解

    把Last-Modified 和ETags请求的http报头一起使用,这样可利用客户端(例如浏览器)的缓存.因为服务器首先产生 Last-Modified/Etag标记,服务器可在稍后使用它来判断页面 ...

  4. Django模型系统——ORM表结构对应关系

    对于数据库来说一般表结构只会有三种对应关系,分别是一对一.一对多和多对一,下面分别介绍: 1.一对多 何为一对多,例如一个学生只可能有一个班级,一个班级却又多个学生,班级表和学生表就是一对多的关系. ...

  5. DEDE 列表页调用如 标题，时间，简介等

    以下是直接从板子中复制出来的,CSS自已根据需要写下就行.在调时简介长度不知道怎么控制,现在说下方法1. infolen='30' 这个可以2. 系统设置 >其它设置 >内容简介长度填下就 ...

  6. cat echo 打印菜单

    cat << END        =============================        1.apple        2.pear        3.banana   ...

  7. min/max优化,count ,group by

    min/max优化 在表中,一般都是经过优化的. 如下地区表 id area pid 1 中国 0 2 北京 1 ... 3115 3113 我们查min(id), id是主键,查Min(id)非常快 ...

  8. EntityFramework 学习 一 Table-Valued Function in Entity Framework 5.0

    USE [SchoolDB] GO /****** Object: UserDefinedFunction [dbo].[GetCourseListByStudentID] */ SET ANSI_N ...

  9. LINQ 学习路程 -- 查询操作 Select, SelectMany

    IList<Student> studentList = new List<Student>() { , StudentName = "John" }, , ...

  10. maven pom filter 导致的问题记录

    Maven提供了一个很不错的功能 Resource Filter, 可以将按不同环境的进行变量赋值, 比如数据库链接, redis, 日志输出位置等等.. 具体的filter如何使用我这里不做介绍, ...