A summary of daily CSS tips (2)--The confusion Inline-block brings

First, the problem description

In the usual layout, Inline-block uses a high frequency ratio, mainly because the row label can be set to a wide height. I found two "problems" in the layout process,

1 row label. There is a 4-pixel gap between the row labels after display:inline-block ; https://jsfiddle.net/firelight/69phh891/

2. set margin:0 Auto for Display:inline-block's Row label, and not center on parent. https://jsfiddle.net/firelight/jh5ojqu6/

I began to understand that Display:inline-block is both a row label and a block tag. The discovery of these two problems is not a simple 1+1=2.

Second, Smoothing out a concept

• Block
  • Will monopolize a row, and multiple block elements will have their own new row. By default, the block element width automatically fills the width of its parent element.
  • You can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows.
  • You can set the margin and padding properties
• Inline
  • A row is not exclusive, and multiple adjacent inline elements are arranged in the same row until one line is not arranged before a new line is changed, and its width varies with the contents of the element.
  • Invalid setting width,height property.
  • Margin and Padding properties, horizontal padding-left, Padding-right, Margin-left, margin-right all produce margin effects, but vertical direction padding-top, Padding-bottom, Margin-top, Margin-bottom does not produce a margin effect .
• Inline-block
  • W3school:an inline-block element is placed as a inline element (on the same line as adjacent content), but it behaves as A block element.
  • My understanding of the previous sentence is that the inline-block element itself is a row label, but it features a block label when a property is set on it. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height and inline peer characteristics.

Third, the problem of analysis

1. There is a 4-pixel gap between the row labels after display:inline-block.
At first I thought it was inline-block, and as a result, when I removed the inline-block, the 4 pixels still existed. In Zhang Xin Xu's blog, explaining that this is in line with the norms of the due performance, the element between the white space between the reason is the space between the tabs, so, remove the space in the HTML, natural spacing on the wood. There are, of course, N ways to solve this problem without affecting the structure of the HTML code, and don't repeat it here. Can refer to Zhang Xin Asahi's article: Http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove

2. set margin:0 Auto for display:inline-block elements, or not center?

margin:0 Auto; is a justification for setting block labels to be centered in the parent. So for Display:inline-block, set margin:0 auto; The row label itself has the upper hand ( and the row label itself is left-aligned by default), so it doesn't work. You should set text-align:center at its parent to center the alignment. If you set a specific margin, the upper and lower left and right four directions are still possible. https://jsfiddle.net/firelight/jh5ojqu6/1/

A summary of daily CSS tips (2)--The confusion Inline-block brings