Question

我正在尝试为基本网站制作一个目标网页来托管我的简历。我使用了一个基本模板，并且在查找为什么页面底部出现空白空格时遇到问题。 HTML和CSS如下：

（我一直在寻找，似乎无法看到导致问题的原因）。

<!DOCTYPE HTML>

<html>
    <head>
        <title> George Ditch </title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.dropotron.min.js"></script>
        <script src="js/jquery.scrollgress.min.js"></script>
        <script src="js/jquery.scrolly.min.js"></script>
        <script src="js/jquery.slidertron.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-layers.min.js"></script>
        <script src="js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="css/skel.css" />
            <link rel="stylesheet" href="css/style.css" />
            <link rel="stylesheet" href="css/style-xlarge.css" />
        </noscript>

    </head>
    <body class="landing">


        <!-- Banner -->
            <section id="banner">
                <div class="inner">
                    <div class="typewriter">
                    <h2>George Ditch</h2>
                    </div>
                    <p>Broadcast Engineering, Content Creation, Event Management.</p>
                    <ul class="actions">
                        <li><a href="#one" class="button big scrolly">Learn More</a></li>
                    </ul>
                </div>
            </section>

    </body>
</html>

CSS：

body {
        background: #fff;
    }

        body.is-loading * {
            -moz-animation: none !important;
            -webkit-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
            -moz-transition: none !important;
            -webkit-transition: none !important;
            -o-transition: none !important;
            -ms-transition: none !important;
            transition: none !important;
        }

    body, input, select, textarea {
        color: #646464;
        font-family: "Lato", Helvetica, sans-serif;
        font-size: 15pt;
        font-weight: 300;
        line-height: 1.75em;
    }

    a {
        -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        color: #e0555a;
        text-decoration: none;
        border-bottom: dotted 1px;
    }

        a:hover {
            text-decoration: none;
            color: #e0555a !important;
            border-bottom-color: transparent;
        }

    strong, b {
        color: #545454;
        font-weight: 700;
    }

    em, i {
        font-style: italic;
    }

    p {
        margin: 0 0 2em 0;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #545454;
        font-weight: 700;
        line-height: 1em;
        margin: 0 0 1em 0;
        letter-spacing: -0.01em;
    }

        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
            color: inherit;
            text-decoration: none;
        }

    h2 {
        font-size: 1.75em;
        line-height: 1.5em;
    }

    h3 {
        font-size: 1.25em;
        line-height: 1.5em;
    }

    h4 {
        font-size: 1.1em;
        line-height: 1.5em;
    }

    h5 {
        font-size: 0.9em;
        line-height: 1.5em;
    }

    h6 {
        font-size: 0.7em;
        line-height: 1.5em;
    }

    sub {
        font-size: 0.8em;
        position: relative;
        top: 0.5em;
    }

    sup {
        font-size: 0.8em;
        position: relative;
        top: -0.5em;
    }

    hr {
        border: 0;
        border-bottom: solid 1px rgba(144, 144, 144, 0.25);
        margin: 2em 0;
    }

        hr.major {
            margin: 3em 0;
        }

    blockquote {
        border-left: solid 4px rgba(144, 144, 144, 0.25);
        font-style: italic;
        margin: 0 0 2em 0;
        padding: 0.5em 0 0.5em 2em;
    }

    code {
        background: rgba(144, 144, 144, 0.075);
        border-radius: 0.5em;
        border: solid 1px rgba(144, 144, 144, 0.25);
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        margin: 0 0.25em;
        padding: 0.25em 0.65em;
    }

    pre {
        -webkit-overflow-scrolling: touch;
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        margin: 0 0 2em 0;
    }

        pre code {
            display: block;
            line-height: 1.75em;
            padding: 1em 1.5em;
            overflow-x: auto;
        }

    .align-left {
        text-align: left;
    }

    .align-center {
        text-align: center;
    }

    .align-right {
        text-align: right;
    }


    .icon {
        text-decoration: none;
        border-bottom: none;
        position: relative;
    }

        .icon:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-transform: none !important;
        }

        .icon > .label {
            display: none;
        }

    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    .button {
        -moz-appearance: none;
        -webkit-appearance: none;
        -o-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        background-color: transparent;
        border-radius: 0.5em;
        border: solid 1px rgba(144, 144, 144, 0.25) !important;
        color: #545454 !important;
        cursor: pointer;
        display: inline-block;
        font-size: 0.8em;
        font-weight: 700;
        height: 3.5em;
        letter-spacing: 0.1em;
        line-height: 3.5em;
        overflow: hidden;
        padding: 0 2em;
        text-align: center;
        text-decoration: none;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

        input[type="submit"]:hover,
        input[type="reset"]:hover,
        input[type="button"]:hover,
        .button:hover {
            background-color: rgba(144, 144, 144, 0.075);
            color: #545454 !important;
        }

        input[type="submit"]:active,
        input[type="reset"]:active,
        input[type="button"]:active,
        .button:active {
            background-color: rgba(144, 144, 144, 0.2);
        }

        input[type="submit"].icon,
        input[type="reset"].icon,
        input[type="button"].icon,
        .button.icon {
            padding-left: 1.35em;
        }

            input[type="submit"].icon:before,
            input[type="reset"].icon:before,
            input[type="button"].icon:before,
            .button.icon:before {
                margin-right: 0.5em;
            }

        input[type="submit"].fit,
        input[type="reset"].fit,
        input[type="button"].fit,
        .button.fit {
            display: block;
            margin: 0 0 1em 0;
            width: 100%;
        }

        input[type="submit"].small,
        input[type="reset"].small,
        input[type="button"].small,
        .button.small {
            font-size: 0.8em;
        }

        input[type="submit"].big,
        input[type="reset"].big,
        input[type="button"].big,
        .button.big {
            font-size: 1em;
            height: 3.5em;
            line-height: 3.5em;
            padding: 0 2.25em;
        }

        input[type="submit"].special,
        input[type="reset"].special,
        input[type="button"].special,
        .button.special {
            background-color: #e0555a;
            color: #ffffff !important;
        }

            input[type="submit"].special:hover,
            input[type="reset"].special:hover,
            input[type="button"].special:hover,
            .button.special:hover {
                background-color: #E46B6F;
            }

            input[type="submit"].special:active,
            input[type="reset"].special:active,
            input[type="button"].special:active,
            .button.special:active {
                background-color: #DC3F45;
            }

        input[type="submit"].disabled, input[type="submit"]:disabled,
        input[type="reset"].disabled,
        input[type="reset"]:disabled,
        input[type="button"].disabled,
        input[type="button"]:disabled,
        .button.disabled,
        .button:disabled {
            background-color: #646464 !important;
            box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
            color: #fff !important;
            cursor: default;
            opacity: 0.25;
        }

    .wrapper {
        padding: 5em 0 3em 0;
    }

        .wrapper.style1 {
            background: #f2f2f2;
        }

            .wrapper.style1 .box {
                background: #ffffff;
                border: 0;
            }

        .wrapper.style2 {
            background: #ffffff;
        }

        .wrapper.style3 {
            background: #e0555a;
            color: #d1f2f5;
        }

            .wrapper.style3 h1, .wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 h4, .wrapper.style3 h5, .wrapper.style3 h6 {
                color: #ffffff;
            }

            .wrapper.style3 header p {
                color: #b5ebef;
            }

            .wrapper.style3 .button {
                border-color: white !important;
                color: #ffffff !important;
            }

                .wrapper.style3 .button:hover {
                    background-color: rgba(255, 255, 255, 0.075);
                }

                .wrapper.style3 .button:active {
                    background-color: rgba(255, 255, 255, 0.2);
                }

    #banner {
        background-attachment: scroll,                      fixed;
        background-color: #494d53;
        background-image: url("images/overlay.png"), url("../images/background.png");
        background-position: top left,                  center center;
        background-repeat: repeat,                      no-repeat;
        background-size: auto,                      cover;
        color: #d1d2d4;
        padding: 16em 0;
        position: relative;
        text-align: center;
    }

        #banner:after {
            -moz-transition: opacity 2s ease-in-out;
            -webkit-transition: opacity 2s ease-in-out;
            -o-transition: opacity 2s ease-in-out;
            -ms-transition: opacity 2s ease-in-out;
            transition: opacity 2s ease-in-out;
            background: #3d4045;
            content: '';
            height: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;
        }

        #banner :last-child {
            margin-bottom: 0;
        }

        #banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
            color: #ffffff;
        }

        #banner .inner {
            position: relative;
            z-index: 2;
        }

        #banner .button {
            border-color: white !important;
            color: #ffffff !important;
        }

            #banner .button:hover {
                background-color: rgba(255, 255, 255, 0.075);
            }

            #banner .button:active {
                background-color: rgba(255, 255, 255, 0.2);
            }

        #banner h2 {
            font-size: 3.25em;
            line-height: 1.25em;
            margin: 0 0 0.5em 0;
            padding: 0;
        }

        #banner p {
            font-size: 1.5em;
            margin-bottom: 1.75em;
        }

    body.is-loading #banner:after {
        opacity: 1.0;
    }

Answer 1

只需添加css

即可

体{ 保证金：0px } OR

体{ 保证金：0px！重要 }

Answer 2

如果您只想删除下方区域：

body {
        margin-bottom: 0px !important;
     }

Answer 3

你也可以使用 *选择器删除用户代理填充或边距。就像那样 * {margin：0;}

HTML5登陆网站

3 个答案: