Question

我面临一个小故障。 div标签左侧有一个空格。我不知道为什么。在附图中，您可以观察到这个问题与两个div有关。一个在顶部作为标题，一个在底部作为页脚。我已经尝试将margin和padding设置为0，但它没有帮助。对不起，我的写作能力差。 http://i.stack.imgur.com/vHat5.png

.body {
            height: 740px;
            background-color: #fff;
            background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em);
            background-size: 100% 1.2em;
            background-attachment: fixed;
        }

        .nav_bar {
            width: 100%;
            background-color: #595959;
            box-shadow: 0px 3px 20px 2px #666666;
            position: fixed;
            top: 0;
            margin: 0;
            padding: 0;
        }

        .footer {
            width: 100%;
            background-color: #595959;
            box-shadow: 0px -3px 20px 2px #666666;
            position: fixed;
            bottom: 0;
            font-size: 14px;
            font-family: 'Segoe UI';
            text-align: center;
            color: #FFF;
            margin: 0;
            padding: 0;
        }

<body class="body">
    <form id="form1" runat="server">
        <div>
            <div id="nav_bar" class="nav_bar">
                <asp:Menu ID="dynmenu" runat="server" Orientation="Horizontal" CssClass="menu">
                    <StaticMenuItemStyle CssClass="menuitem" />
                </asp:Menu>
            </div>
            <div id="site_content" class="">
                <div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
            <div id="footer" class="footer">
                Designed & Developed by Adnan Ahmed - <a href="mailto:adnanahmed008@gmail.com" target="_top" title="GMail">Send Mail</a> - Contact# 0312-5944404
            </div>
        </div>
    </form>
</body>

Answer 1

浏览器添加margin: 8px默认值。所以你必须覆盖它以获得你想要的对齐。

添加 margin:0;

到

.body{}

＆＃13;

.body {
            height: 740px;
            background-color: #fff;
            background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em);
            background-size: 100% 1.2em;
            background-attachment: fixed;
            margin: 0;
        }

        .nav_bar {
            width: 100%;
            background-color: #595959;
            box-shadow: 0px 3px 20px 2px #666666;
            position: fixed;
            top: 0;
            margin: 0;
            padding: 0;
        }

        .footer {
            width: 100%;
            background-color: #595959;
            box-shadow: 0px -3px 20px 2px #666666;
            position: fixed;
            bottom: 0;
            font-size: 14px;
            font-family: 'Segoe UI';
            text-align: center;
            color: #FFF;
            margin: 0;
            padding: 0;
        }

＆＃13;

<body class="body">
    <form id="form1" runat="server">
        <div>
            <div id="nav_bar" class="nav_bar">
                <asp:Menu ID="dynmenu" runat="server" Orientation="Horizontal" CssClass="menu">
                    <StaticMenuItemStyle CssClass="menuitem" />
                </asp:Menu>
            </div>
            <div id="site_content" class="">
                <div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
            <div id="footer" class="footer">
                Designed & Developed by Adnan Ahmed - <a href="mailto:adnanahmed008@gmail.com" target="_top" title="GMail">Send Mail</a> - Contact# 0312-5944404
            </div>
        </div>
    </form>
</body>

＆＃13;

Answer 2

您需要在.body类中添加margin：0px和padding：0px。另外一个提示是在身体中使用CSS如下：

body {
            height: 740px;
            background-color: #fff;
            background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em);
            background-size: 100% 1.2em;
            background-attachment: fixed;
            margin:0px;
            padding:0px;
}

小提琴here。

div标签左侧的未预测空间

2 个答案: