CSS - dispaly:inline-block-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3352/article/details/82650829

如果不是块级（ block ）类型的元素，当设置 width, height, margin 属性时不起作用。因为 display 为 inline 时，没有这些属性。

但是，如果 display 设置为 : inline-block 的元素，即保持了 inline 的自调节位置，又同时具备了 block 的 width, height, margin 属性。

========================================================================

[url=http://www.w3schools.com/css/css_inline-block.asp][b]CSS Layout - inline-block[/b][/url]

[b]The inline-block Value[/b]

It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the [color=brown]float[/color] property.

However, the [color=brown]inline-block[/color] value of the [color=brown]display[/color] property makes this even easier.

[color=brown]inline-block[/color] elements are like [color=brown]inline[/color] elements but they can have a [color=brown]width[/color] and a [color=brown]height[/color].


<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
    display: inline-block;   
    margin: 10px;
    border: 3px solid #73AD21; 

    height:50px;
}
</style>
</head>
<body>

<h2>The New Way - using inline-block</h2>

<!-- same effect with :
     <span> element. -->
<span class="floating-box">Floating box</span>Hello, World!
<span class="floating-box">Floating box</span>Hello, World!
<span class="floating-box">Floating box</span>Hello, World!
<span class="floating-box">Floating box</span> Hello, World!

<!-- use <div> element -->
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>


</body>
</html>