个人中心
gpt4 book ai didi

HTML CSS 边距？

转载 作者：太空宇宙 更新时间：2023-11-03 21:44:13 25 4
gpt4 key购买 nike

左边距有点问题:

http://crystalise.tw/stuff/parallaxScroll/

如您所见，我无法弄清楚小边距的来源是什么，我想我可以通过在 CSS 中为 HTML 标记分配一个负的 margin-left 值来摆脱它，但这不是最佳解决方案。你能帮我找到更好的方法吗？？

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<title>LifeSymb.com</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <section id="intro" class="scrollBlock">
        <h2 class="arrow_box">scroll down to learn<br />
            more about us!</h2>
    </section>
<section>
    <article id="slide1" class="scrollBlock">
            <h1>SLIDE 1</h1>
                <h2>The Need</h2>
            <p>60% of all runners experience chronic or acute<br />
                injuries related to running</p>
                <img src="images/runInjury.jpg" alt="" width="540" height="360" />
            <p>and a previous injury is number one predictor for a<br />
                subsequent injury.</p>
            <p>Prevention is worth a consideration, if you are<br />
                planning to maintain an active lifestyle.</p>
    </article>
    <article id="slide2" class="scrollBlock">
                <h2>BUT WHAT CAN YOU DO?</h2>
            <p>Relevant knowledge is hidden in millions of pages<br />
                of literature...</p>
                <img src="images/books.jpg" alt="" width="436" height="275" />
            <p>...but do you really want to read all these books?<br />
                How do you know what information is important for<br />
                your individual case?</p>
    </article>
    <article id="slide3" class="scrollBlock">
                <h2>SLIDE 3</h2>
            <p>First you need to know more about your body, then<br />
                you can apply knowledge from external sources to it.</p>
            <p>Hence, evidence based decision-making is the<br />
                optimal way to a high standard health and fitness<br />
                solution.</p>
            <p>But, how can you get insight on your body on a<br />
                regular basis for a small price?</p>
    </article>
    <article id="slide4" class="scrollBlock">
                <h2>THE ANSWER IS....</h2>
            <p>Georg</p>
            <p>an intelligent self-screening system</p>
            <p>Georg is a cost-efficient and unique way to improve<br />
                health and fitness to an optimal level, while<br />
                considering individual constraints and potentials.</p>
    </article>
    <article id="slide5" class="scrollBlock">
                <h2>SLIDE 5</h2>
            <p>It is an intelligent self-screening and analyzing<br/>
                system, creating an individual health and fitness<br />
                profile.</p>
            <p>The profile is accessible via computer or smart-<br />
                phone. It shows your personal strengths and risks<br />
                using a virtual avatar.</p>
            <p>In that way, Georg will guide you in all your<br />
                decisions regarding health and fitness, helping you<br />
                staying healthy and pushing your performance to a<br />
                new, more sustainable level.</p>
    </article>
    <article id="slide6" class="scrollBlock">
                <h2>ENJOY...</h2>
            <p>..increased autonomy and control of your health<br />
                and physical independence, and decreased fear<br />
                and risk of injury.</p>
                <h2>HAVE ACCESS...</h2>
            <p>..to your status instantly at any time and predict the<br />
                success of your training, considering your individual<br />
                profile. You are responsible for your success.</p>
    </article>
    <article id="slide7" class="scrollBlock">
                <h2>SHARE...</h2>
            <p>..your success on social media platforms such as<br />
                facebook and twitter.</p>
                <h2>CONTROL...</h2>
            <p>..your personal development and achieve your<br />
                fitness and health goals with the help of your<br />
                private health and fitness mentor.</p>
    </article>
    <article id="outro" class="scrollBlock">
                <h2>OUTRO</h2>
                <img src="images/logo.png" alt="" width="164" width="59">
            <p>prescribe now for our free newsletter, and be<br />
                one of the first!</p>
            <p>subscribe here</p>
    </article>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="scripts/libs/jquery.scrollorama.js"></script>
<script src="scripts/scrollScript.js"></script>
</body>
</html>

CSS:

body{
    margin-top: 0px;
    width: 100%;
    font: 18px/30px Sans-serif;
    color: black;
    background:url('../images/bodyBG.png');
    overflow-x: hidden;
}

section{
    width: 80%;
    margin: 0px auto;
}

h2{
    margin: 0px;
}

section article {
    /*margin: 0px auto;*/
}

.scrollBlock{
    width: 80%;
    opacity: 1;
    padding-bottom: 500px;
}

#intro{
    height: 1000px;
    background: yellow;
    padding-top: 600px;
    width: 100%;
    margin-left: 0px;
}
    #intro h2{
        width: 400px;
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
        padding: 60px;
        font-size: 40px;
        font-family: verdana, monospace;
        margin-left: auto;
        margin-right: auto;
}

#slide1{
    background: lightgreen;
    /*background-size: cover;*/
}

    #slide1 h1{
        margin: 0px;
        width: 677px; height: 122px;
        background: url(../images/btn_intro.png);
        text-indent: -9999px;
        position: relative;
        top: 0px;
        left: 0px;
    }
    #slide1 p{
        position: relative;
        top: 0px;
        left: 0px;
        width: auto;
        /*margin: 0 0 30px 0;*/
    }
    #slide1 p:nth-child(2){
        font-weight: bold;
    }

最佳答案

主体本身有一个默认边距，您可以覆盖它:

body { margin: 0; }

关于HTML CSS 边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21530511/

25 4 0
文章推荐： c# - 使用 OpenFileDialog 时如何从 *.abcd 文件中过滤 *.abc？
文章推荐： python - GCM 数据的重新网格化/重新映射
文章推荐： c# - 使用特殊字符时出现解析错误
文章推荐： jquery - 悬停在单元格上时显示的 4x4 网格
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com