當文本添加到div中時，爲什麼會出現間隙？

Question

當我向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> 

Answer 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 */ 
} 

Answer 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的語義。