introduce

HTML elements have a variety of display attributes. A common one is display: None; display:block; Display: inline and display: inline – block; And so on.

  1. Default display:block attribute (block-level element)
<div> <h1>... <h6> <p> <ul>,<ol>,<dl> <li>,<dt>,<dd> <table> <pre>Copy the code

“, which is displayed as a block, takes up its available space on a line across which there is no room for another element to walk.

  1. Default display:inline attribute (inline element)
<span>
<a>
<strong>
<em>
<img>
<br>
Copy the code

Elements, which do not interrupt the document layout flow, are placed next to each other on a line.

Problems with using float:

The important thing about using float is that there is an element that wraps the float element without the following element being too close to it.

Another problem is when you have a multi-line horizontal list, but the contents of the list have different heights, which can be very painful.

Use the display: inline – block; Method:

display:inline-block; Style a list so that the elements of the list can be arranged row by row,

At the same time, elements can maintain their block attributes, such as height and width, top and bottom margins, and so on.

However, for elements with different heights, the alignment is usually set, such as vertical-align: top; Align the top of the element.

Use the display: inline – block; Browser compatible with:

Use display:inline-block in the CSS. Styling is available in Firefox, Safari, Google Chrome and IE 8 and above.

But earlier Versions of IE, like IE 7, had to make some changes to fit in.

/* For IE 7 */
 zoom: 1;
 *display: inline;
Copy the code

In general, it is best to do browser-compatible CSS styling in separate style files and then introduce it through conditional comments.

Use the display: inline – block; Whitespace caused by:

Because elements are lined with inline modifiers, Spaces in the HTML affect this modifier as well. In other words,

When we have sorted the size and order of the elements, if there is a space between the

  • elements,

    • This space will produce a margin of 4px.

    review

    1. Use the display: inline – block; Horizontal lists are much easier to control than float, with the important thing to note is that they are affected by the margins of Spaces.

    2. Inline-block is bottom aligned by default. To align two elements at the top, add veritcal-align:top;

    3. Inline -block widths can be set by themselves, and inline widths are invalid.

    References:

    1. CSS display:inline-block and float discussion address: record the problems encountered in learning, record growth