Css 儿童'；s填充与父项'；填充物

我很难理解到底发生了什么。问题在于

容器似乎在开始文本后立即设置其边界。所以我想知道为什么
的填充会溢出容器

这是反应组件-

JSX-

const topSection = ()=> {
    return (
        <section className="top-section">
            <img className="img-intro" src="./images/illustration-intro.png" alt="illustration-img"/>
            <h1>All your files in one secure location, accessible anywhere.</h1>

            <p>Fylo stores all your most important files in one secure location. Access them wherever 
            you need, share and collaborate with friends family, and co-workers.</p>

            <a href="/">Get Started</a>          //ISSUES WITH THIS ONE
        </section>
    )
}

@import "../../colors.scss";

.top-section {
    text-align: center;
    background: url("/images/bg-curvy-mobile.svg") center bottom/150% 75% no-repeat border-box;
    margin-top: 5%;

    img {
        width: 100%;
        margin-bottom: 10%;
    }

    h1, p, a {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    h1 {
        font-size: 1.4rem;
        line-height: 1.5;
    }
    a {
        color: white;
        background: color(get-started);
        padding: 1em 6em;
        border-radius: 2em;
        margin: 10% auto;
    }
}

问题在于

噢，谢谢你指出。所以它意味着
填充
不会影响
内联
项？任何细化？一般来说，内联元素的行为与块元素不同。在这种情况下，只有左侧和右侧填充才会产生效果。这是因为默认情况下，它没有附加换行符，这意味着您可以看到填充，但没有换行符。我认为最好的理解方法是看这里，例如：