关于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 ...
随机推荐
- (23) java web的struts2框架的使用-struts动态调用和通配符
一,动态查找 1,配置允许动态调用 <!-- 允许动态方法调用 --> <constant name="struts.enable.DynamicMethodInvocat ...
- UIView局部点击
今天上班遇到一种情况,需要局部响应点击事件,比如在一个UIImageView中设置一个小圆圈图片,要求点击圆圈里面不响应点击,点击小圆圈外面的部分响应点击.可以通过重写hitTest:withEven ...
- Eclipse 创建新的workspace
工具:eclipse 版本:4.5.1 1.配置jdk(java-Compiler).maven(Mven-User Settings) 2.从svn拉取项目,创建.project(修改其项目名称) ...
- WJC上学记
WJC上学记题目描述:WJC为了追求YHY,决定考上树人,但是,愚蠢的他没有足够好的成绩,只能靠自己的亲戚来帮忙.但是由于他足够愚蠢,连自己的亲戚都不认识,仁慈而被树人优录的Geek_du决定帮助他. ...
- 使用delphi 开发多层应用（十六）使用XMLRPC 实现basic4android 远程调用RTC服务（讲述了RTC的特点，其底层通讯协议是自己封装SOCK 库，与kbmmw 的适合场合不完全一样）
RealThinClient (以下简称RTC) 也是一款delphi 多层开发的框架,由于其底层通讯协议是自己封装SOCK 库,抛弃了 大家诟病的indy,因此表现的非常稳定,效率也非常高, ...
- shell脚本怎么调试
shell是Linux系统上常用的一种脚本语言.一般从事web后台开发的从业者,都会用到shell,因此shell调试也是一项必备的技能.本文教你如何进行shell脚本调试. 工具/原料 Linu ...
- dedecms中去除首页index.html的方法
本文介绍了dedecms中去除首页index.html的方法,有需要的朋友参考下. dedecms织梦cms建站程序输入地址后,而打开的实际地址后面有个index.html. 这里分享下两种解决方 ...
- chrome——关于chrome浏览器的奇葩问题
前言 说下自己遇到的关于chrome的奇葩问题~ 问题 目前就一个,还是刚才才遇到的~ 消息通知 客户的chrome浏览器死活没有通知,检查后发现通知权限未开启, 通知权限开启后,还是没有提示,最后排 ...
- html5--6-50 动画效果-变形
html5--6-50 动画效果-变形 实例 学习要点 掌握2D变形动画 了解3D变形动画 transform:2D变形: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.转换方 ...
- WebStorm配置SVN
下载SVN客户端管理工具TortoiseSVN-1.8.5.25224-x64-svn-1.8.8,选择合适的Windows版本 配置项目目录,对应的VCS为Subversion 设置Subversi ...