如何通过CSS调整固定页眉与页脚内的内容向下偏移？

你添加margin-bottom不生效的原因是该属性控制的是元素和下方其他元素的间距，无法实现元素内部内容下移的效果。你之前尝试的三个位置添加margin-bottom都达不到效果的原因分别是：

1. 给.container加：只会控制container元素和下方相邻元素的间距，不会让container内部的内容往下移
2. 给.fixed-header, .fixed-footer加：只会控制页眉页脚和其他元素的间距，这两个元素是fixed定位脱离文档流，加margin也不会影响内部内容位置
3. 给nav a加：只会控制每个导航链接下方的间距，不会让导航整体下移

要实现需求选以下任意一种方案即可：

• 方案1：调整页眉页脚父容器的内边距（推荐，全局统一控制）
  修改.fixed-header, .fixed-footer的padding属性，把上边的内边距调大即可，示例修改：

/* 同时调整body的上下内边距，避免中间正文被页眉页脚遮挡 */
body{        
    padding-top: 120px; /* 对应header的总高度，可根据实际效果调整数值 */
    padding-bottom: 110px; /* 对应footer的总高度，可根据实际效果调整数值 */
}
.fixed-header, .fixed-footer{
    width: 100%;
    height: 100px; /* 如果你调大了上边的padding，可适当减小这个值避免内容溢出 */
    position: fixed;        
    background: #333;
    padding: 25px 0 10px; /* 原属性是10px 0，修改后上内边距25px、左右0、下内边距10px，内容就会自然下移，数值可自行调整 */
    color: #fff;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
}

• 方案2：单独控制内部元素的上边距，不需要修改父容器样式
  直接给页眉里的导航、页脚里的版权文本添加margin-top即可：

/* 页眉导航下移，数值可自行调整 */
nav {
    margin-top: 18px;
}
/* 页脚版权文字下移，数值可自行调整 */
.fixed-footer .container {
    margin-top: 15px;
}

内容的提问来源于stack exchange，提问作者Nix