The vertical gap problem of the inline-block of the inline block

Problem background: Mobile programming inside the left and right button layout, not with the table layout, and used the floating (in order to let 2 each half the width of the buttons arranged in one row), because the floating element out of the original document flow, resulting in the parent element (block Element) occupies a height of 0, When the display property of the parent element is set to inline block Inline-block, it is surprising to find that it can occupy the height of the floating element, but after a period of time it is found that there is a drawback, that is, a portion of the bottom more space, do not know how to kill, and these two buttons exactly to put to the bottom, There is no space below, the code is as follows.

<styletype= "Text/css">. Box1{Border:1px solid Red;width:100%;}. Box2{box-sizing:Border-box;Border:1px solid;Display:Inline-block;width:100%;}span{width:50%;Background-color:#ddd;Display:Inline-block;text-align:Center;padding:0.5em 0;float: Left;}</style><Divclass= "Box1">    <Divclass= "Box2">        <span>Are you sure</span>        <span>Cancel</span>    </Div></Div>

Effects such as:

Baidu on a search, there is a solution, but no one can use. What to remove the newline space (tried many times, not), set the font size of 0 AH (the company's computer did not succeed, at home to try to find it is OK), set the margin offset AH (despise this practice, not adopted), the gap is still there. Finally, the kungfu is not a conscientious, another article said can be set vertical-align for top, this test is feasible.
So the fix code is as follows:

<styletype= "Text/css">. Box1{Border:1px solid Red;width:100%;}. Box2{box-sizing:Border-box;Border:1px solid;Display:Inline-block;width:100%;vertical-align:Top; /*attempts to find a value set to another can also eliminate the gap, as long as the vertical-align is set*/}span{width:50%;Background-color:#ddd;Display:Inline-block;text-align:Center;padding:0.5em 0;float: Left;}</style><Divclass= "Box1">    <Divclass= "Box2">        <span>Are you sure</span>        <span>Cancel</span>    </Div></Div>

Plus it's possible to find that the font-size is set to 0 when you go home, so the second type of fix code is as follows:

<styletype= "Text/css">. Box1{Border:1px solid Red;width:100%;font-size:0; /*set to 0*/}. Box2{box-sizing:Border-box;Border:1px solid;Display:Inline-block;width:100%;font-size:16px; /*overwrite the configuration of the parent element*/}span{width:50%;Background-color:#ddd;Display:Inline-block;text-align:Center;padding:0.5em 0;float: Left;}</style><Divclass= "Box1">    <Divclass= "Box2">        <span>Are you sure</span>        <span>Cancel</span>    </Div></Div>

The second scenario is not ideal and cannot inherit the global font size, so the first is better.
Before also found a Netizen method, the inner block floating after the clearance can be eliminated, this is feasible, but after the float and become not occupy the height of space, and the parent element into the inner block, so that the cycle of death.

The vertical gap problem of the inline-block of the inline block