代码中的BodyInner，

Question

我正在为我的某个网站制作布局，并且我在页面中间有一个div。当我在div中键入文本时，div的边框和文本之间似乎存在很大的差距。我已经在div上将padding设置为0，它仍在应用某种填充。我已经在IE 10和Google Chrome 29上测试了这个。我的代码低于Here是一个jsFiddle。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Club Website</title>
    <link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
    <link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />

    <style type="text/css">

    </style>

    <script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
    <script type="text/javascript">
        $('document').ready(function() {

        });
    </script>
</head>
<body>
<div id="Wrapper">
    <div id="Header">
        <div id="HeaderInner">
            <a href="#" class="HeaderLink HeaderSelectedLink">Main Page</a>
            <a href="#" class="HeaderLink">Other Page</a>
            <a href="#" class="HeaderLink">Other Page</a>
            <a href="#" class="HeaderLink">Other Page</a>
            <a href="#" class="HeaderLink">Other Page</a>
        </div>
    </div>

    <div id="Body">
        <div id="BodyInner">
            Hi
        </div>
    </div>
</div>
</body>
</html>

CSS

/* Layout */
html, body, #Wrapper {
    width: 100%;
    min-width: 1000px;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    background-color: #f2f2f2;
}

#Header {
    width: 100%;
    height: 45px;
    display: block;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #333;
    box-shadow: 2px 2px 3px #999;
}

#HeaderInner {
    width: 965px;
    height: 45px;
    display: block;
    margin: 0 auto;
    padding: 0;
    background-color: transparent;
    line-height: 45px;
    text-align: center;
}

#Body {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 45px;
    left: 0;
    background-color: transparent;
}

#BodyInner {
    width: 965px;
    height: auto;
    min-height: 100%;
    display: block;
    margin: 0 auto;
    padding: 0;
    background-color: transparent;
    word-wrap: break-word;
    white-space: pre-wrap;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
}
/* Layout */

/* Links */
.HeaderLink {
    color: #999;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    text-decoration: none;
    cursor: pointer;
    margin: 0 15px;
}

.HeaderLink:hover {
    text-decoration: none;
    color: #FFF;
}

.HeaderSelectedLink {
    color: #FFF;
}
/* Links */

Answer 1

间距是由以下CSS规则引起的：

white-space: pre-wrap;

其呈现方式与<pre>标记类似，为HTML源代码中的每个换行符/换行符绘制一条线。

所以使用以下HTML：

<div id="BodyInner">
    Hi
</div>

在屏幕上绘制Hi之前和之后的空白。

Answer 2

删除白色空间：预包装;

代码中的BodyInner，

请参阅：http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap

CSS随机填充

2 个答案:

代码中的BodyInner，