如果不是 块级（ block ） 类型的元素，当设置 width, height, margin 属性时不起作用。因为 display 为 inline 时，没有这些属性。
但是，如果 display 设置为 : inline-block 的元素，即保持了 inline 的自调节位置，又同时具备了 block 的 width, height, margin 属性。
========================================================================
CSS Layout - inline-block
The inline-block Value
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 float property.
However, the inline-block value of the display property makes this even easier.
inline-block elements are like inline elements but they can have a width and a height.
<!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>
-