当我将文本添加到 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>
最佳答案
使用vertical-align:top
:
#textboxSquare {
display: inline-block;
box-sizing: border-box;
width: 150px;
height: 150px;
border: 1px solid #848484;
vertical-align: top; /* added */
}
关于html - 为什么在div中添加文本时会出现空隙?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20185510/