为什么将文本添加到 div 时会有间隙？答案

【问题标题】：Why is there a gap when text added into div?为什么将文本添加到 div 时会有间隙？
【发布时间】：2013-11-26 12:49:13
【问题描述】：

当我将文本添加到 textboxsquare 时，它会在 Div 上方添加一个空格，为什么会这样？我该如何做才能使这个空格不存在，并且与另一个空格保持一致？ http://jsfiddle.net/wK6dp/1/

CSS

#textbox {
   border: 1px solid #848484;
   -moz-border-radius-topleft: 30px;
   -webkit-border-top-left-radius: 30px;
   border-top-left-radius: 30px;
   -moz-border-radius-topright: 30px;
   -webkit-border-top-right-radius: 30px;
   border-top-right-radius: 30px;
   outline:0;
   height:auto;
   display: block;
   box-sizing: border-box;
   width: 300px;
   padding-left:20px;
   padding-right:20px;
   background-color: #f47924;
   margin: 0px;
   font-family: 'Droid Sans', sans-serif;
   text-align:center;
   color:white;
}

#textboxSquare {
   display:inline-block;
   box-sizing: border-box;
   width: 150px;
   height: 150px;
   border: 1px solid #848484;
}

HTML

<div id="textbox">
    <h3>John Smith</h3>
</div>
<div id="textboxSquare"></div>
   <div id="textboxSquare">
       Copy Pasta pasta <br />
       Copy Pasta pasta <br />
       Copy Pasta pasta <br   />
       Copy Pasta pasta<br />
   </div>
</div>

【问题讨论】：

标签： html vertical-alignment css

【解决方案1】：

使用vertical-align:top:

jsFiddle

#textboxSquare {
display: inline-block;
box-sizing: border-box;
width: 150px;
height: 150px;
border: 1px solid #848484;
vertical-align: top;    /*   added   */
}

【讨论】：

【解决方案2】：

首先，您不能在标记中两次使用相同的 id 名称。其次，如果您使用display:inline-block，请添加vertical-align:top; 以使您的东西正常工作。

WORKING DEMO

CSS 变化：

.textboxSquare {
display:inline-block;
box-sizing: border-box;
width: 150px;
height: 150px;
border: 1px solid #848484;
vertical-align:top;
}

PS：我已将您的 id 更改为 class 用于语义。

【讨论】：