内联元素和块级元素的区别是新手必须要掌握的知识点。大家可能平时注意块级元素比较多。所以这里重点让我们来讲讲常见的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. OPENCV在ARM平台的移植

    两篇别人推荐给我的文章,我想直接复制过来,呵呵,但一想真不好,等我做一遍了再来写一遍.还是贴链接. OpenCV在ARM上的移植:http://www.cnblogs.com/emouse/archi ...

  2. React中Transition的作用

    /** * `Transaction` creates a black box that is able to wrap any method such that * certain invarian ...

  3. easyUI-右键菜单,关闭选项卡

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. 转:Oracle客户端NLS_LANG参数的设置详解

    原文:http://database.51cto.com/art/201107/279361.htm 我们知道,Oracle客户端语言支持可以通过NLS_LANG参数的设置来完成,不同的系统平台上NL ...

  5. hdu 3746 Cyclic Nacklace（next数组求最小循环节）

    题意:给出一串字符串,可以在字符串的开头的结尾添加字符,求添加最少的字符,使这个字符串是循环的(例如:abcab 在结尾添加1个c变为 abcabc 既可). 思路:求出最小循环节,看总长能不能整除. ...

  6. 自定义android 音乐通知栏 ——可伸缩扩展

    Android custom notification for music player Example   In this tutorial, you will learn how to creat ...

  7. UVA-11462 (计数排序)

    题意: 2e6个数,按从小到大的顺序输出; 思路: 计数排序; AC代码: #include <bits/stdc++.h> /* #include <vector> #inc ...

  8. liunx下的权限详解

    用户组 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念 - 所有者 - 所在组 - 其它组 - 改变用户所在的组 所有者 一般为文件的创建 ...

  9. Power Crisis

    传送门 这道题被严重恶意评分了,实际应该是绿题. 因为其实我们只需要模拟即可.这里我们引入一种新的东西:约瑟夫环. 它能直接告诉你约瑟夫问题中最后一个存活下来的人是谁.(不过下标是从0开始的,实际使用 ...

  10. 字体的设置 REM EM PX

    px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...