css关于内外边距的详细解释
贴图吧，图一眼明了。
无效果时候有
只有一个<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关于内外边距的详细解释的更多相关文章
- css - 盒子内外边距
css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{ width:200px; ...
- 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS
typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...
- css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...
- 学习微信小程序之css11内外边距集合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android UI系列-----长度单位和内外边距
这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑 ...
- CSS Margin（外边距）
CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...
- css3-8 内外边距中的注意要点有哪些
css3-8 内外边距中的注意要点有哪些 一.总结 一句话总结:padding,border都是外延的.margin会合并. 1.两元素样式都有margin:15px,他们中间的距离是15px还是30 ...
- css内外边距属性
盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...
- CSS 内外边距 float positio属性
一.外边距和内边 margin: 用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding: ...
随机推荐
- linux c编程:popen
我们在执行shell命令比如cat /etc/group | grep root的时候,通过管道的机制将cat /etc/group的结果传递给grep root,然后将结果显示出来 linux中提供 ...
- ABAP 面向对象(Object Orientation) OO
[转自 http://blog.sina.com.cn/s/blog_7c7b16000101bhof.html]在程序中, 对象的识别和寻址是通过对象引用来实现的, 对象引用变量可以访问对象的属性和 ...
- Onenet GPS上传经纬度的格式 笔记
首先搞清楚几个问题: 1.GPS输出的经纬度 GPS获取的数据: 3438.1633,N,11224.4992,E 格式是ddmm.mmmmm 2.Onenet服务器识别的经纬度坐标格式 服务器识别需 ...
- python基础18 ---多态与绑定方法
一.抽象类 1.抽象类的定义:从一堆类中抽象出相同的内容,重新组成一个新的类,这样的类属于抽象类. 2.香蕉类是一类水果,苹果类是一类水果,葡萄类是一类水果,但是他们都属于水果,从他们这些类中可以抽象 ...
- 第12条：不要在for和while循环后面写else块
核心知识点: (1)一般的if/else是前面不执行,后面才执行,循环下面的else是前面执行完后面才会执行,如果是break打断也不会执行.循环为空或False也不执行. (2)try/expect ...
- mathjax
MathJax.Hub.Typeset() method. This will cause the preprocessors (if any were loaded) to run over the ...
- [原创]java WEB学习笔记36：Java Bean 概述，及在JSP 中的使用，原理
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- servlet实现验证码
(博客内容来自:jsp使用servlet实现验证码,以下内容只是不才对原博客的摘抄以便以后翻阅使用) 一.原理: 验证码作为一个图片,在页面中为“画”出来的,它是如何画出来的呢? <生成图片&g ...
- java中的Enumeration
Enumeration en = pp.keys(); while(en.hasMoreElements()){ String key = (String)en.nextElement(); Syst ...
- python glances来监控linux服务器CPU 内存 IO使用
什么是 Glances? Glances 是一个由 Python 编写,使用 psutil 库来从系统抓取信息的基于 curses 开发的跨平台命令行系统监视工具. 通过 Glances,我们可以监视 ...