inline-block

内联块状元素就是同时具备内联元素、块状元素的特点。

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.不能更改元素的height，width的值，大小由内容撑开.可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom

布局其实就是想办法怎样将一些元素横向的排列起来，纵向由于块级元素的存在会自动占据一行。inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行，而且使用 inline-block 元素排列没有清除浮动这样的问题。但是，使用 inl

学习mark

本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了 inli

基本知识点行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。块级元素：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。行内元素去除了之间的莫名空白。

先问为什么display:inline-block的元素会存在间隙？参考overstackflow上的一个答案。This is exactly what they should do.Spaces between inline elements are n

在明确了这些间隙产生的原因后，要去除这些间隙就变得容易多了，通常有以下集中办法去除这些间隙：。}优点：相比与设置负的margin-right大小的不确定性，设置font-size:0;显得更加好控制。

position: relative;display: inline-block;width: 12px;height: 12px;content: '';display: inline-block;position: absolute;top: 6px;

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。

初始问题描述最近在学习CSS的display属性时，遇到一个在IE6/7下html块级元素设置inline-block属性的兼容性问题，于是就查资料，网上很多关于这个问题的解答，大致的描述如下：[1]. IE6、IE7支持对html行内元素设置inline

Display:Inline-Block样式属性应到块级元素上，可以让它与其上的行内元素在一行里显示，且块级元素不会充满父容器。

設置float的位于行首的元素[如div,ul中的li等]，使用margin后，横向margin值会加倍。浮动元素上的{display:inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。

設置float的位于行首的元素[如div,ul中的li等]，使用margin后，横向margin值会加倍。浮动元素上的{display:inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。

旁边的内联对象会被呈递在同一行内，允许空格。◆CSS display:inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，大都会对这一属性感觉很模糊,这里向大家简单介绍一下。将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但很遗憾，最流行的

总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子。和其他元

在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，无论是初接触Web标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，

在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，大都会对这一属性感觉很模糊。将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但很遗憾，最流行的IE和Firefox却不

在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，大都会对这一属性感觉很模糊。将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但很遗憾，最流行的IE和Firefox却不

而现在对于inline-block属性运用的需求也越来越多，可惜依旧只有Firefox3beta、IE8beta、Opera、Safari支持inline-block属性，但IE6、IE7可以通过触发hasLayout来模拟，Firefox2有-moz-i

两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。

.sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px