CSS Display:inline-block and float difference (can try to use a bit)

HTML elements have a variety of display properties, more common are display:none; display:block; display:inline and display:inline-block; etc. Refer to the W3Schools documentation for details.

Some HTML elements have display:block in the natural zone; style attributes, such as
<div>

<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>
element, which is displayed as a block style, takes the space that is available in a row to occupy the span and not allow another element to walk with it.

Some HTML elements are naturally with display:inline; style attributes, which are also the default styles for elements, such as
<span>
<a>
<strong>
<em>

<br>
elements, which do not break the flow of the document arrangement, are arranged in a row one by one.

when you want to make a horizontal list, one way is to use float to do it, but you have to tolerate its drawbacks, and the other is to use display:inline-block; Now it's time to go to the chase.

The trouble with float means:
The float method needs to be noted that there is an element to wrap the float element, while avoiding the next element tightly close to it. Another trouble is that when there is a multiline level list, but the contents of the table have different heights, it is very painful.

to use Display:inline-block; way:
Display:inline-block; When you style a list, the list elements can be arranged in rows, while elements retain their block properties, such as high and wide, top and bottom margins, and so on. However, for elements with different height content, it is often necessary to set the alignment such as Vertical-align:top, which aligns the top of the element.

Browser compatible with Display:inline-block:
CSS using Display:inline-block, to style, in Firefox, Safari, Google Chrome and IE 8 and above are valid. But in the early ie, ie 7, it is necessary to make some changes to adapt.
/ * for IE 7 * /
zoom:1;
*display:inline;
In General, browser-compatible CSS styling is best done by separating separate style files and then introducing them through conditional annotations.

problems caused by using Display:inline-block; 's whitespace characters:
because the elements are arranged inline in line, the whitespace in the HTML also affects the decoration. That is, when we arrange the size and order of the elements, if there is a space between the <li> elements, the space character will produce a margin of 4px.

Overview

1, with Display:inline-block; to realize the level list is more easy to control than float, it is important to note that the former will be caused by the space margin effect.

2, inline-block default is the bottom of the alignment, to let two elements of the top of the alignment, need to add a sentence: Veritcal-align:top;
3, the width of the inline-block can be set by itself, and the self-setting width of the inline is invalid.

CSS Display:inline-block and float difference (can try to use a bit)