should not use Inline-block instead of float

CSS layouts Create sites, and floats definitely occupy a large proportion. Large areas such as the main content and sidebar, as well as the small areas in it, can be seen floating shadows. Is floating here the only solution?

Float usually behaves normally, but sometimes it gets tangled up. In particular, the handling of floats in the inner container, such as the use of floating after a row of pictures, the problem of alignment occurs. Inline-block is another option for us. Using this property allows you to simulate some of the floating features without having to deal with some of the problems caused by floats.

Inline-block is not a fresh topic, I think you've used it. But I recently used this attribute. On several previous sites, there was a need to show a series of photos, and I used inline-block instead of floating.

What is Inline-block?

Inline-block is a value of the element display property. The name is derived from the fact that display sets the element of this value, combining the characteristics of the inline element (elements) with block-level elements (block elements).

1. block-level elements (blocks elements), derived from the CSS box model. Block-level elements contain width height,padding,border and margin, and they are arranged from top to bottom. Inline elements, arranged in a horizontal arrangement.
2. Inline elements are arranged horizontally in elements .
3. Inline block Element (Inline-block elements) inside he behaves like a block element, such as the width height,padding,border and margin that he owns the block element, The outer arrangement is similar to the inline elements, which are arranged horizontally, rather than being arranged from top to bottom like block-level elements.

If you think about these things, you can see that the difference between the inline-block element and the element setting floats is not very significant. When the boxes are set to float, they are also arranged horizontally. Although they implement different principles, but the internal performance of block-level elements, horizontal arrangement of this demand, floating and inline-block are suitable for implementation.

The difference between Inline-block and float

Although setting floats is similar to setting inline-block, the difference between the two is quite obvious:

1. document Flow: Floating elements move out of the document stream and surround the elements with surrounding elements. The Inline-block element is still within the document flow. Therefore, setting Inline-block does not need to clear the float. Of course, the surrounding elements don't wrap around this element, and you can't just let an element run down by clearing Inline-block.
2. horizontal position (horizontal position): It is obvious that you cannot center a floating element by setting the Text-align:center to the parent element. The fact that the Anchor class property is set to the parent element does not affect the floating element within the parent element. But within the parent element if Display:inline-block is set, setting some positional properties on the parent element affects the child elements. (This is also because the floating element is out of the document flow).
3. Vertical alignment (Vertical alignment): Inline-block elements are aligned along the default baseline. The floating element clings to the top. You can set this default baseline with the Vertical property, but this method is not available for floating elements. This is the main reason I tend to inline-block.
4. Blank (whitespace): Inline-block contains HTML white space nodes. If you have a series of elements in your HTML that are wrapped between each element, when you set inline-block on those elements, there will be whitespace between them. Floating elements ignore white space nodes and cling to each other.
5. IE6 and IE7: IE67 is partially supported for this attribute. If you want to be compatible with these browsers, you must solve this problem. It's not a big problem, but it's worth paying attention to.

Now we've set the block-level element to Display:inline-block, the left side of the picture, and there's a blank space between the elements. If we remove the whitespace between the elements (line wrapping), we get the effect on the right side of the picture. That's the only difference. (See how to resolve whitespace gaps for inline-block elements in more detail)

Resolve Whitespace issues

You're probably ready to go, but you don't want the blanks to appear. Here are some ways to get rid of the blanks:

1. remove whitespace from HTML : Don't let the elements wrap, which may be more painful, but it's also a method, especially when you don't have a lot of elements.
2. use negative margins: You can use negative margins to make up the blanks. But you need to adjust the font-size because the width of the blank is related to this attribute. I think it's 0.25em, but I'm not sure. If anyone knows, you can tell me by message.
3. set the font-size:0 for the parent element: Regardless of the size of the white space, due to the relationship between white space and font-size, set this property to set the width of the blank to 0. In practice, you also need to reset the font-size to the child elements.

When to use Inline-block, when to use float

When to use it depends on your design draft and the solution. If you need text to wrap around the container, that float is the perfect choice. Inline-block is a good choice if you need to align the elements in the center.

Ultimately, this can be attributed to the difference between the two properties of float and inline-block, which you need to make a choice of.

1. use Inline-block: Use Inline-block when you need to control the vertical alignment of elements and horizontal arrangement.
2. Use floating: use floating when you need to wrap elements around an element, or if you need to support older versions of IE, or if you don't want to deal with the whitespace problems that Inline-block brings.

, set a series of elements floating, because the box second width of the relationship, you can find box fifth is squeezed in (these elements are separated from the flow of the document), this is the picture arrangement is a very common problem.

Floating, inline-block, and image arrangement

I use inline-block primarily to deal with vertical alignment issues. I think that's why a lot of people use this property. Many of the sites I make are inevitably accompanied by a list of pictures.

If the picture in the parent element is high, the set float will work fine. But once a row of pictures is high, the picture is arranged in a problem. This is because after floating, the picture is out of the flow of the document.

This problem does not occur because Inline-block is not out of the document stream. If you want to create a column of pictures again, you won't be affected by the inline:block of the previous column of pictures. When you use it, you need to be careful to clear the float, which is prone to bugs when the content is constantly changing.

Here is a more obvious example of the difference between Inline-block and float:

I made a demo to show the difference between the two writing effects

The block level element above is set to Inline-block. Because they are not out of the flow of the document, the elements are not squeezed out by an extended column.

Inline-block Navigation

Another scenario for Inline-block: the horizontal navigation bar. Generally, we usually set the A element display:block and then float to make it. Sometimes I make it directly by setting display:inline on the list element. If you need to set different display properties to handle floats in production, then Inline-block is a better solution.

When you need to arrange the elements in one row or multiple rows, you tend to consider using inline-block instead of float. Of course, the direct use of table is also a method, after all, he is specifically designed to handle horizontal and vertical arrangement of elements.

If you need to create a complex layout with rows and columns, table is your best choice, but you can also consider Inline-block

Summarize

We often use floats, but floating is not the only solution. Sometimes inline-block is better, especially if you want to arrange some pictures, or when you are arranging links horizontally.

The Inline-block element has characteristics of some inline elements (arranged horizontally), and the interior also has properties for block-level elements. This is very similar to floating, but there are some differences.

These differences determine which of the options you should use. If you're struggling with vertical alignment or arranging elements horizontally, you might want to use Inline-block. If you need more control over an element with some of the elements around him, you need to float.

Of course, table is also the best solution for you to deal with some problems.

And I want to say that this is not something new, but I will use this document and demo to introduce some scenarios that should be used but some people have not yet used inline-block.

Thank you very much for reading this article, I hope this post can really help you when you learn to use CSS. Of course, there are opinions and suggestions you can also ask for ~

Translator Sign Language: the entire translation according to the original line, and in the process of translation slightly personal understanding of the technology. If the translation has the wrong place, also please peer friend pointing. Thank you!

If you want to reprint please indicate the source:

English Original: http://www.vanseodesign.com/css/inline-blocks/

Chinese translation: http://www.w3cplus.com/css/inline-blocks.html

should not use Inline-block instead of float