内联元素和块级元素的区别是新手必须要掌握的知识点。大家可能平时注意块级元素比较多。所以这里重点让我们来讲讲常见的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 对内联元素的影响的更多相关文章

  1. float对内联元素和块元素的影响

    写在前面:附一篇w3s的关于css float的讲解:http://www.w3school.com.cn/css/css_positioning_floating.asp float属性还没有彻底了 ...

  2. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  3. margin在块元素、内联元素中的区别 padding

    (1)margin在块元素.内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline.顾名思义,block元素就是以”块”表现的元素(bloc ...

  4. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

  5. margin和padding对行内元素的影响

    这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...

  6. 内联元素的盒子模型与文档流定位padding属性

            内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100 ...

  7. Css中的两个重要概念：块状元素和内联元素

    一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...

  8. 块级元素和内联元素的区别（HTML）

    请把下面二行代码放进body标签里:     <div style=”border: 1px solid red;”>div1</div>     <div style= ...

  9. HTML--内联元素与块级元素

    >>内联元素(inline element) a,span,input,select,label,img,textarea,sub,sup,li,i,small,strong,em,b,b ...

随机推荐

  1. 微信小程序引入外部js 方法

    步骤: 1.首先将外部js放在你指定的文件夹里(这都是废话...) 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js 4.使用暴露出来的方法 例子:使用md5加密 ...

  2. 计算机学院大学生程序设计竞赛（2015’12）Bitwise Equations

    Bitwise Equations Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  3. 广大暑假训练1 E题 Paid Roads(poj 3411) 解题报告

    题目链接:http://poj.org/problem?id=3411 题目意思:N个city 由 m 条路连接,对于一条路(假设连接Cityia和 Cityb),如果从Citya 去 Cityb的途 ...

  4. 【转载】Java中StringTokenizer类的作用

    StringTokenizer是一个用来分隔String的应用类,相当于VB的split函数.1.构造函数public StringTokenizer(String str)public String ...

  5. docker 初试---常用命令

    http://blog.csdn.net/wsscy2004/article/details/25878363 常用命令 查看容器的root用户密码 docker logs <容器名orID&g ...

  6. linux编程 fmemopen函数打开一个内存流 使用FILE指针进行读写访问

    fmemopen()函数打开一个内存流,使你可以读取或写入由buf指定的缓冲区.其返回FILE*fp就是打开的内存流,虽然仍使用FILE指针进行访问,但其实并没有底层文件(并没有磁盘上的实际文件,因为 ...

  7. C++ main函数中参数argc和argv含义及用法

    argc 是 argument count的缩写,表示传入main函数的参数个数: argv 是 argument vector的缩写,表示传入main函数的参数序列或指针,并且第一个参数argv[0 ...

  8. 【POJ 2478】 Farey Sequence

    [题目链接] 点击打开链接 [算法] 不难看出,ans = phi(2) + phi(3) + .... + phi(n-1) + phi(n) 线性筛筛出欧拉函数,预处理前缀和,即可 [代码] #i ...

  9. 出现ImportError: No module named win32api异常

    ImportError: No module named win32api出现异常 实际是需要安装和自己python兼容的win32all 在http://starship.python.net/cr ...

  10. B. Chris and Magic Square

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...