Reason for horizontal arrangement of inline-block elements and method for removing the interval, inline-block horizontal arrangement

Reason for horizontal arrangement of inline-block elements and method for removing the interval, inline-block horizontal arrangement

1. Problem scenarios:

The above layout needs to be implemented. The three graphs are arranged horizontally, with the left and right sides in the middle, and there is a fixed interval between the graphs, at first, it is implemented in the following way (for convenience, it is expressed by inline style ):

<Div style = "width: 100%; overflow: auto;">

<Div style = "width: 32%; float: left"> </div>

<Div style = "width: 32%; margin-left: 34%"> </div>

<Div style = "width: 32%; float: right"> </div>

</Div>

In this implementation method, float is used to control the left and right sides of the diagram to be parked on both sides. The middle graph calculates the total width of the three graphs by 96%, and the remaining value is 4%, this 4% is divided into two parts to achieve the spacing between the left and right sides of the graph. Therefore, the interval between the middle graph and the left and right sides of the graph is controlled by using margin-left: 34%.

2. I don't want to implement it through float. I want to divide the width equally by controlling the div width of each img container to 33.33333%. At the same time, I want to control the container's padding value to reach the spacing between the middle graph and the two sides of the graph, that is:

<Div style = "width: 100%">

<Div style = "width: 33.33333%; display: inline-block;"> </div>

<Div style = "width: 33.33333%; display: inline-block;"> </div>

<Div style = "width: 33.33333%; display: inline-block;"> </div>

</Div>

After this implementation, it is found that the three img container divs are not set with any margin and padding, but the image cannot be displayed in one row, and the third image is pushed to the second row, there is an interval between the graph and the graph. After finding the cause and solution on the Internet, we can find out the elements of the inline-block horizontal presentation in the true sense, there will be spacing when line breaks are displayed or spaces are separated. Finally, the interval between inline-block arrangement is removed by setting font-size: 0 for the most external parent container, the distance between attributes padding and border-box in the same time and space is implemented as follows:

<Div style = "width: 100%; font-size: 0;">

<Div style = "width: 33.33333%; display: inline-block; padding: 2px; box-sizing: border-box"> </div>

<Div style = "width: 33.33333%; display: inline-block; padding: 2px; box-sizing: border-box"> </div>

<Div style = "width: 33.33333%; display: inline-block; padding: 2px; box-sizing: border-box"> </div>

</Div>