CSS Random Padding

I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a 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 */

Solution

The spacing is caused by the following CSS rule:

white-space: pre-wrap;

Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.

So with the following HTML:

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

the whitespace before and after Hi are being drawn on-screen.