What is inline-block in css? Use of inline-block layout

What is inline-block in css? This article will introduce to you what inline-block means in CSS and let you know the benefits of using inline-block in CSS layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s understand what inline-block is?

inline-block represents an inline block element. For example, img and input are inline block elements by default. That is, by default, the value of the display attribute is inline-block. .

Features of inline-block:It can set the width and height without occupying a line alone.

Because of this feature of the inline-block element, it can play a big role in CSS layout.

For a long time in the past, people wanted to create many grids to cover the browser (as shown below). The first thing that came to mind was to use the float attribute, but floats have many limitations. We After using the floating layout, you must also clear the floating to eliminate the impact of floating on other elements.

In fact, it is easier to use inline-block to achieve the above effect.

As long as the value of display attribute is set to inline-block , the same effect can be achieved, and the element will not break away from the text flow.

.box {
	width: 80px;
	height: 80px;
	border: 2px solid peru;
	display: inline-block;
	margin: 10px 8px;
}

Rendering:

achieves the same effect as float (floating), without having to avoid some problems (such as: parent element height collapse) and set clear:both; (clear float).

Some things you need to keep in mind when implementing inline-block layout:

1. The vertical-align attribute will affect the inline-block element, and you need to change its The value is set to top;

2. The width of each column needs to be set;

3. If there are spaces between elements in the html source code, there will also be gaps between columns.

The gap problem is also easy to solve. You can:

Add {font-size:0} to the parent element, that is, set the font size to 0 , then the whitespace character also becomes 0px, thus eliminating the gap. However, please note that if there is text in the box itself, you need to set its own font size to an appropriate value at the same time, otherwise it will not be displayed.

.demo {
	width: 520px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	font-size: 0;
}
.box {
	width: 80px;
	height: 80px;
	border: 2px solid peru;
	display: inline-block;
	font-size: 14px;
}

Now this method is compatible with various browsers. In the past, the chrome browser was incompatible

4. Browser compatibility: ie6 /7 is not compatible with display: inline-block, so additional processing is required:

For browsers below ie6/7, you need:
If it is an inline element, use {dislplay:inline-block directly ;}
If it is a block-level element: {display:inline;zoom:1;}

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related video tutorials, please visit: css tutorial!

The above is the detailed content of What is inline-block in css? Use of inline-block layout. For more information, please follow other related articles on the PHP Chinese website!