0

我正在为我的一个网站进行布局，并且页面中间有一个 div。当我在 div 中输入文本时，div 的边框和文本之间似乎有很大的差距。我已在 div 上将填充设置为 0，它仍在应用某种填充。我已经在 IE 10 和 Google Chrome 29 上对此进行了测试。我的代码在下面这是一个 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 */
4

2 回答 2

2

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

white-space: pre-wrap;

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

因此，使用以下 HTML：

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

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

于 2013-08-31T00:29:04.523 回答
1

删除空格：预包装；

BodyInner 在您的代码中，

refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap

于 2013-08-31T00:48:52.453 回答