关于margin、padding 对内联元素的影响
内联元素和块级元素的区别是新手必须要掌握的知识点。大家可能平时注意块级元素比较多。所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响。
测试代码（在谷歌浏览器运行版本 49.0.2623.87 m，火狐效果同谷歌）
<style type="text/css">
* {
margin: 0;
padding: 0; }
body{
font-size: 12px;
font-family: "微软雅黑";
}
span{
width:500px;
height: 500px;
border: 1px solid red;
background: yellow;
margin-top:10px;
margin-bottom: 10px;
margin-left:10px;
margin-right:10px;
padding-top:100px;
padding-bottom: 100px;
padding-left:10px;
padding-right:10px;
box-sizing:border-box;
}
div{
color:orange;
background: blue;
height: 100px;
}
</style>
</head> <body>
<div>蓝色区域的我是div 蓝色区域的我是div 蓝色区域的我是div</div>
<span>i am inline box</span>
</body>
inline：
width和height 可以看成物理属性，对内联元素没有影响。 能够影响它宽高的为其本身的内容。
margin-top:10px;margin-bottom: 10px;无效果
margin-left和margin-right;起作用。
padding属性就比较特别了。
padding-left;padding-right同样有效果,与块元素效果相同。
padding-top和padding-bottom不会影响它的高度，但是会影响他的背景高度。
单个inline元素样式（隐藏了上方的div）
上方加入块级元素div后的样式
block
块元素就没什么好说了。
width,heigth对其产生影响。
块元素实际宽度 = width+padding-left+padding-right+border（没有设置box-size的情况下）
注意
1.css3中box-size属性的的出现对块元素的实际宽度的影响。（ps.这是个好工具）
2.虽然对于inline元素 margin-top之类的没有影响但是在谷歌和火狐的调试器中的布局中仍然是有显示的。
关于ie（这里只测试了 ie7-ie9）
1.仅在ie7中 inlinede的padding 属性没有作用。如图
2.仅在ie9中，开发工具中的布局图，显示的宽高为css中设置的width，height值，而不是内联元素本身的值。在调试中要注意。如图
关于margin、padding 对内联元素的影响的更多相关文章
- float对内联元素和块元素的影响
写在前面:附一篇w3s的关于css float的讲解:http://www.w3school.com.cn/css/css_positioning_floating.asp float属性还没有彻底了 ...
- margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
- margin在块元素、内联元素中的区别 padding
(1)margin在块元素.内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline.顾名思义,block元素就是以”块”表现的元素(bloc ...
- margin和padding那点事及常见浏览器margin padding相关Bug
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...
- margin和padding对行内元素的影响
这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...
- 内联元素的盒子模型与文档流定位padding属性
内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100 ...
- Css中的两个重要概念：块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
- 块级元素和内联元素的区别（HTML）
请把下面二行代码放进body标签里: <div style=”border: 1px solid red;”>div1</div> <div style= ...
- HTML--内联元素与块级元素
>>内联元素(inline element) a,span,input,select,label,img,textarea,sub,sup,li,i,small,strong,em,b,b ...
随机推荐
- IE67下float左右对齐
例子: <style> .h1{text-align: left;} .leftA{color: #000} .rightA{color: #ccc; float: right;} < ...
- HDU 1257：最少拦截系统
最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- linux初级学习笔记八：linux权限管理及权限管理命令详解！(视频序号：04_2)
本节学习的命令:chown,chgrp,chmod,openssl,umask 本节学习的技能: 文件权限详解及对其的操作 生成随机密码命令 用遮罩码对用户权限进行修改 站在用户登陆的角度来说SHEL ...
- javascript 树形菜单
1. [代码][JavaScript]代码 var ME={ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0},html:function(da,f){var s='& ...
- hdu 1963 Investment 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1963 题目意思:有 本金 money,还有一些股票的种类,第 i 种股票买入需要 value[i] 这 ...
- codevs3285转圈游戏
传送门 3285 转圈游戏 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Descript ...
- 201响应为什么进了AJAX error回调函数
明明AJAX发送请求成功,但是后端返回的不是200,而是201,结果进了error的回调函数,想这种情况,只需要把“dataType:"json",改成dataType:" ...
- 高并发服务器架构--SEDA架构分析
纯粹转发,没有深入研究,转自:SEDA架构笔记 百牛信息技术bainiu.ltd整理发布于博客园 一.传统并发模型的缺点 基于线程的并发 特点:每任务一线程直线式的编程使用资源昂高,context切 ...
- 堆、栈的区别 <转载>
本篇非作者原创,转子链接,仅供学习记录. 一.预备知识—程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值 ...
- 玩下GourdScan
GourdScan是一个分布式SQL漏洞扫描器,采用Python+PHP开发,后端采用SQLMAP.通过浏览器代理方式获取请求进行漏洞检测. win10 准备: phpstudy python2.7 ...