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

    mv $a"/"$b"/"* $a"/"$b"/preview" 移动某个文件夹下的所有文件 使用* 但*不用双引号

  2. bootstrap的学习注意点

    1.bootstrop里面所有的内容都需要用一个container 容器包裹起来: 2.一屏二屏什么的,是通过id 与href实现的: 3.下拉与菜单之类的都有固定的代码: 4.需要修改相关属性的话, ...

  3. POJ2516 Minimum Cost —— 最小费用最大流

    题目链接:https://vjudge.net/problem/POJ-2516 Minimum Cost Time Limit: 4000MS   Memory Limit: 65536K Tota ...

  4. easyui 日期范围前后台的设置以及实现

    1.页面部分(引入相应的js) <td class="w40 tl pl10">从日期:</td> <td> <input class=& ...

  5. 栏目抓取网站日kafka

    #!/usr/bin/python3#-*- coding:utf-8 -*-"""create 2018-02-27author zldesc: https://ind ...

  6. Java经典算法大全

    1.河内之塔.. 2.Algorithm Gossip: 费式数列. 3. 巴斯卡三角形 4.Algorithm Gossip: 三色棋 5.Algorithm Gossip: 老鼠走迷官(一) 6. ...

  7. MongoDB 用户名密码登录

    Mongodb enable authentication MongoDB 默认直接连接,无须身份验证,如果当前机器可以公网访问,且不注意Mongodb 端口(默认 27017)的开放状态,那么Mon ...

  8. ol 与ul 的区别

    1 <!DOCTYPE html> <html> <body> <ul> <li>咖啡</li> <li>牛奶< ...

  9. windows下patch

    经常在网上看到有人发布patch文件来更新他们的开源代码,例如cegui.ogre等都使用这种形式来修bug或者增加一些小功能.但是,我们下载到的patch文件,貌似是linux/unix的diff工 ...

  10. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时1

    课时1 计算机视觉历史回顾与介绍上 CS231n:这一一门关于计算机视觉的课程,基于一种专用的模型架构,叫做神经网络(更细一点说,是卷积神经网络CNN).计算机视觉是人工智能领域中发展最为迅猛的一个分 ...