Question

有人可以解释一下为什么第一个代码会产生一个固定的页脚，右边有一个小的边距，因为我使用了一个额外的'div'但没有这个，如第二个代码所示，它没有显示边距正确的？谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            width: 100%;
            margin: 0px auto;
        }
        .mymargin {
            clear: both;
            position: fixed;
            bottom: 0px;
            text-align: right;
            width: 100%;
            background-color: fuchsia;
        }
        footer {
            margin-right: 20px;
        }
    </style>
</head>
<body>
Look in the right corner below!
    <div class="mymargin">
        <footer>
            <a href="abababab">fixedfooterwithmargin-ontheright</a>
        </footer>           
    </div>
</body>
</html>

没有额外div的第二个代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            width: 100%;
            margin: 0px auto;
        }
        footer {
            clear: both;
            position: fixed;
            bottom: 0px;
            text-align: right;
            width: 100%;
            background-color: fuchsia;
            margin-right: 20px;
        }
    </style>
</head>
<body>
Look in the right corner below!
    <div class="mymargin">
        <footer>
            <a href="abababab">fixedfooter NO hmargin-ontheright</a>
        </footer>           
    </div>
</body>
</html>

Answer 1

尝试使用right代替margin-right：

footer {
    clear: both;
    position: fixed;
    bottom: 0px;
    text-align: right;
    width: 100%;
    background-color: fuchsia;
    right: 20px;
}

jsfiddle：http://jsfiddle.net/ashishanexpert/3eFPt/

Answer 2

您的页脚标记已经占据宽度的100％。因此边距将超出它。

它在第一种情况下起作用，因为你给了父级宽度。所以孩子的保证金有效。尝试在第一种情况下将100％添加到页脚，甚至根据需要不能正常工作。

固定页脚右边距

2 个答案: