div CSS内的HTML CSS标签（div有display：inline-block;）由于某种原因增加了填充/边距？

Question

提琴手：

http://jsfiddle.net/9QeP4/1/

^^^将结果宽度向左滑动，这样它们就会将它们全部显示在彼此旁边

代码：

 <div>

<div style="display: inline-block;">
    <label>Account Name:</label> <br>
    <label>Email Address:</label> <br>
    <label>Password:</label>
</div>

<div style="display: inline-block;">
    <form>
        <input type="text" name="txtAccountName"> <br>
        <input type="text" name="txtEmailAddress"> <br>
        <input type="password" name="txtPassword"> <br>

        <input type="submit" value="Submit">
    </form>
</div>

<div style="display: inline-block;">
    <label>Some error message</label> <br>
    <label>Some other Error message</label> <br>
    <label>Why was the E capitalized in that last sentence</label>
</div>

</div>

为什么这会为标签添加填充/边距？由于某种原因，它将它们推下而不是与顶部齐平

Answer 1

非填充保证金问题，其对齐问题..使用vertical-align: top;您的问题已解决。

<div style="display: inline-block;vertical-align: top;">
    <label>Account Name:</label> <br>
    <label>Email Address:</label> <br>
    <label>Password:</label>
</div>

Answer 2

它不是边距或填充，只是遵循HTML规则。

因为所有三个div都是内联块，所以它将显示在一行中。

第二个块比其他两个块高，所以它显示如下。

我认为最好更改你的HTML代码。 在同一组中进行相关控制。或者将来，改变布局可能会更困难。

Answer 3

您的Html代码格式不正确

<强> HTML

<div style="position: relative;">

    <div  style="float:left; display:inline-block;">
        <label>Account Name:</label> <br/>
        <label>Email Address:</label> <br/>
        <label>Password:</label>
    </div>

    <div style="float:left;display:inline-block;">
        <form action="/webroot/NewUserSignUpProcess" method="post">
            <input type="text" name="txtAccountName"/> <br/>
            <input type="text" name="txtEmailAddress"/> <br/>
            <input type="password" name="txtPassword"/> <br/>

                        <input id="newSignupSubmit" type="submit" value="Submit"/>
        </form>
    </div>

    <div style="display: inline-block;float:left;">
        <label>Some error message</label> <br/>
        <label>Some other Error message</label> <br/>
        <label>Why was the E capitalized in that last sentence</label>
    </div>

</div>  

我已将其格式化

<强> Working Fiddle