内联元素和块级元素的区别是新手必须要掌握的知识点。大家可能平时注意块级元素比较多。所以这里重点让我们来讲讲常见的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. rails用generate为两个模型创建has_and_belongs_to_many中间表

    假设 teachers和students具备many-to-many的关系,那么需要一个Join 表,has_and_belongs_to_many默认该表名字为teachers_students,这 ...

  2. YTU 2427: C语言习题 整数排序

    2427: C语言习题 整数排序 时间限制: 1 Sec  内存限制: 128 MB 提交: 391  解决: 282 题目描述 用指向指针的指针的方法对n个整数排序并输出.要求将排序单独写成一个函数 ...

  3. select下拉带图片-模拟下拉

    <style> /*下拉列表*/ ul,dl,ol,li {list-style: none;} .dropdown { float: right; position: relative; ...

  4. codeforces 690D2 D2. The Wall (medium)(组合数学)

    题目链接: D2. The Wall (medium) time limit per test 2 seconds memory limit per test 256 megabytes input ...

  5. 嵌入式Linux学习方法——给那些彷徨者（下）

    上一章解决了嵌入式Linux的“学什么”问题,这一章则具体来说一下“怎么学”. 只要做好以下3点: 1.学习顺序.学习任何东西都应该由浅入深,不能一口吃下一个大胖子,得循序渐进.很多刚开始想学习Lin ...

  6. node.js适合游戏后台开发吗？

    网站服务器和游戏服务器是怎么样联系到一起的? 百牛信息技术bainiu.ltd整理发布于博客园 1. 游戏分很多种,咱们先来看看MMORPG. 再怎么简单的RPG服务器都免不了处理多人交互的情形,上百 ...

  7. JNI 解析

    JNI是什么? JNI(Java Native Interface)意为JAVA本地调用,它允许Java代码和其他语言写的代码进行交互,简单的说,一种在Java虚拟机控制下执行代码的标准机制. NDK ...

  8. Spring 3.1新特性之一：使用Spring Profile和Mybatis进行多个数据源（H2和Mysql）的切换

    最近在做WebMagic的后台,遇到一个问题:后台用到了数据库,本来理想情况下是用Mysql,但是为了做到开箱即用,也整合了一个嵌入式 数据库H2.这里面就有个问题了,如何用一套代码,提供对Mysql ...

  9. Bootstrap-CL：按钮下拉菜单

    ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...

  10. ASP.NET Core：Pages

    ylbtech-ASP.NET Core:Pages 1.返回顶部 1._Layout.cshtm <!DOCTYPE html> <html> <head> &l ...