贴图吧，图一眼明了。

无效果时候有

只有一个<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. vue项目创建流程和使用

    vue项目的创建 npm run dev 让项目执行起来 #下载vuex npm install vuex --save#下载axiosnpm install axios --save 当我们生成项目 ...

  2. Centos设置开机启动Apache和Mysql

    先用chkconfig --list查询apache和mysql服务是否存在,不存在则需要手动添加 [root@centos64 vsftpd]# chkconfig --list 测试存在,只需要开 ...

  3. Android系统移植与调试之------->如何修改Android设备的桌面背景图片

    1.切换到~/mx0831-0525/device/other/TBDG1073/overlay/frameworks/base/core/res/res目录 2.准备好一张相应尺寸的图片并且命名为d ...

  4. 我的Android进阶之旅------>Android颜色值(RGB)所支持的四种常见形式

    Android中颜色值是通过红(Red).绿(Green).蓝(Blue)三原色,以及一个透明度(Alpha)值来表示的,颜色值总是以井号(#)开头,接下来就是Alpha-Red-Green-Blue ...

  5. 搜索ABAP程序代码中的字符串

    标准程序名:RPR_ABAP_SOURCE_SCAN /BEV1/NERM07DOCS

  6. python基础7 ---python函数

    python基础知识 一.闭包函数 1.闭包函数的定义:在一个内部函数中,在对外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就被认为是闭包. 2.闭包函数的特点:自带作用域和延迟计算 补 ...

  7. 牛客小白月赛1 A 简单题 【数学】

    题目链接 https://www.nowcoder.com/acm/contest/85/A 思路 这个 就是 E 但是 运算的时候 要保证 其精度 AC代码 #include <cstdio& ...

  8. [转]Homebrew 卸载时出现：Failed to locate Homebrew! 错误

    今天在 MacBook 上安装 Homebrew,结果中间断了网,想重新卸载重装,结果一直卸载失败.问题现象如下: 问题现象 卸载时错误如下: ruby -e "$(curl -fsSL h ...

  9. ubuntu下单网卡绑定多个IP

    第一种方式静态修改. 进入 /etc/network/ 目录下.修改interfaces文件. # The primary network interfaceauto eth0iface eth0 i ...

  10. stm32非操作系统开发和带uCos的开发的区别，及一些解析

    从文件角度来看core_cm4.h和stm32f4xx.h分别从内核寄存器和外设寄存器来定义其地址和结构体,是用c语言访问硬件必须的文件,所以这两个文件不论是否带操作系统,都是必须包含进工程的. re ...