CSS不会在DIV中对齐文本

Question

我是学习jquery并创建自己的网站的新手。 这是我的小提琴JSFIDDLE 。 当您将鼠标悬停在新的div上时会显示一些文字。 但是文本不在该div中。 我想要新div中的文字。 我不知道为什么会这样。 我知道这是一个愚蠢的问题，但是我花了一个多小时才把它弄对了。

编码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="example.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="box">
  <h2 id='name'> Karan Shah </h2>
  <div id='innerbox'><span><h4 id='emptyInfo'></h4></span><div>
  <script>
    $('#innerbox').hide();
  </script>
</div>

<script>
$('#name').css('color','black');
$('#name').css('text-align','center');


$(document).ready(function () {
    var originalText = $('#name').text();
    var tOut;
    $("#box").hover(
        function () {   
            tOut = setTimeout(function(){
                $('#innerbox').show('slow',function(){
                    $('#emptyInfo').fadeOut(400, function () {
                        $(this).text('Welcome to my website').slideDown().css('text-align','center');
                    }); 
                }); 
            },1000);        

        },
        function(){
            clearTimeout(tOut);
            $('#innerbox').hide('slow',function(){
                $('#emptyInfo').hide('slow');
            });     
        }
    );
});
</script>

</body>
</html>

CSS

#box {
    background-color: lightgrey;
    width: auto;
    padding: 25px;    
    margin: 25px;
}
#emptyInfo{
    font-size: 150%;
}

#innerbox {
    background-color: white;
    width: auto;
    height: 30px;
    border-radius: 10px;
    border : 1px;
    border-style: solid;
    border-color: darkgrey;
}

Answer 1

就像伊曼纽尔（ #emptyInfo { margin: 0; }提到的那样，标题标签以其自己的边距烘焙，设置#emptyInfo { margin: 0; } #emptyInfo { margin: 0; }将解决您的问题。

为了参考这些默认值，可以检查浏览器的特定默认样式表。 请参阅此处： 如何找到浏览器的默认样式表？

请注意，由于大多数HTML元素都带有默认值，因此HTML / CSS的作者通常会按照W3C的详细介绍对它们的页面进行“规范化”： http : //www.w3.org/International/questions/qa-html-css-normalization 。

Answer 2

#innerbox高度应为自动。 这是JSfiddle

#innerbox {
    background-color: white;
    width: auto;
    height: auto; /*** This should be auto instead of 30px */
    border-radius: 10px;
    border : 1px;
    border-style: solid;
    border-color: darkgrey;
}