Css 右页边距固定页脚_Css - Fatal编程技术网

Css 右页边距固定页脚

css

Css 右页边距固定页脚,css,Css,有人能解释一下为什么第一个代码会产生一个固定的页脚，在右边有一个小的边距，因为我使用了一个额外的'div'，但是没有这个，就像在第二个代码中看到的那样，它不会在右边显示边距吗？谢谢 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { width: 100%;

有人能解释一下为什么第一个代码会产生一个固定的页脚，在右边有一个小的边距，因为我使用了一个额外的'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>


身体{
宽度：100%；
保证金：0px自动；
}
.mymargin{
明确：两者皆有；
位置：固定；
底部：0px；
文本对齐：右对齐；
宽度：100%；
背景色：紫红色；
}
页脚{
右边距：20px；
}
看看下面的右角！

没有额外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>


身体{
宽度：100%；
保证金：0px自动；
}
页脚{
明确：两者皆有；
位置：固定；
底部：0px；
文本对齐：右对齐；
宽度：100%；
背景色：紫红色；
右边距：20px；
}
看看下面的右角！

尝试使用

右侧

代替

右边距

：

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

jsIDLE:

您的页脚标记已经占据了100%的宽度。。因此，利润将被排除在外

它在第一种情况下起作用，因为您为父对象指定了宽度。所以，孩子身上的保证金起了作用。在第一种情况下，尝试将100%添加到页脚，即使这样也无法按要求工作