贴图吧，图一眼明了。

无效果时候有

只有一个<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. [note]最近公共祖先

    最近公共祖先(LCA)https://www.luogu.org/problemnew/show/P3379 #define RG register #include<cstdio> #i ...

  2. Redis通过PUBLISH / SUBSCRIBE 等命令实现了订阅与发布模式

    # 切换目录 [root@localhost /]# cd /opt/redis-4.0.10 # 启动客户端 -p 指定端口 [root@localhost ~]# redis-cli -p 638 ...

  3. html_dom类读取

    上传类文件以后,有三种方式调用这个类:从url中加载html文档从字符串中加载html文档从文件中加载html文档 复制代码 代码如下: <?php// 新建一个Dom实例$html = new ...

  4. CryptoJS加密

    <script type="text/javascript" src="CryptoJS/core.min.js"></script>& ...

  5. spring ioc和aop理解

    1.IOC 表示控制反转. 简单点说就是原来的对象是在要使用之前通过在代码里通过new Something()的方式创建出来的: IOC则是由spring容器创建同一创建,在程序要使用到该对象的时候, ...

  6. sidekiq

    redis-server 需要先被安装

  7. 事件监听机制——列出指定目录内容、添加Dialog对话框

    事件监听机制理解与Dialog练习 利用Java语言,仿照我的电脑目录进行打开目录,输入文件路径,查看该路径下所有的文件,设置两个文本框,一个转到按钮,当点击转到按钮时,查看路径是否正确,若正确在第二 ...

  8. Charles进行HTTPS抓包(iOS为例)

    各种抓包工具的原理都是一样的,使用方面也都是差不多的,因为最近在用Mac,所以抓包工具开始用Charles了,记录一下抓取HTTPS的步骤. 连接代理, 开启抓包工具, 手机设置代理服务器,端口号(默 ...

  9. castle windsor学习-----Fluent Registration API 注册

    使用xml配置和fluent注册两种搭配使用需要注意的是: 如果先在WindsorContainer构造函数指明用xml配置进行注册,如下设置 IWindsorContainer container ...

  10. [转]Tomcat启动分析

    [转]Tomcat启动分析 原帖 http://docs.huihoo.com/apache/tomcat/heavyz/01-startup.html 以下摘录了部分 --------------- ...