关于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 ...
随机推荐
- django rest_framework swagger使用案例
环境准备 环境要求: python3 django2 pip3 模块安装: pip3 install django-rest-framework pip3 install django-rest-sw ...
- css 中的伪类选择器before 与after
.cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...
- bzoj3090: Coci2009 [podjela]
这个范围明显树包的 然而值并不滋磁 想了一会发现可以带一维当前子树用了多少边,搞定当前向上还能送多少 然后发现会有搞不定的情况,要向上传负数 每次都要重新初始化,负数强制要要 #include< ...
- 一步一步学Silverlight 2系列（13）：数据与通信之WebRequest
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 在canvas标签和style中定义width和height
在canvas标签中定义width.height跟在style中定义width.height是不同的.canvas标签的width和height是画布实际宽度和高度,就是在这个上面绘制图形.style ...
- 书写优雅的shell脚本（一）- if语句
使用unix/linux的程序人员几乎都写过shell脚本,但这其中很多人都是为了完成功能而在网上找代码段,这样写出来的shell脚本在功能方面当然是没有什么问题,但是这样的方式不能写出优雅的shel ...
- 如何使用BMap.Point传递变量、存储数据？
在开发中使用到了百度地图进行开发,用于展示企业位置.由于数据量庞大,如果使用marker,将会造成界面卡顿,处理慢的问题. 在查看百度地图API示例是发现了海量点这个东西,还别说对于大数量的点加载起来 ...
- 15个你不可不知的cmd命令
cmd和dos: dos是Disk Operating System 磁盘操作系统的缩写,它是个人计算机上的一类操作系统.跟Windows图像界面操作系统不同的是,dos是一种面向磁盘的操作系统,并且 ...
- python-----windows下安装face_recognition库
如果直接在cmd命令界面 输入:pip install face_recognition 如下图所示: 如果第一次就会出现一系列的问题,解决此问题就安装如下步骤: 一.如果你本机没有安装vistual ...
- vs 2015 community Blend和devenv启动的区别
使用Blend启动会有部分功能无法显示 如:SVN管理插件,工具栏 使用devenv启动会全部显示