Child 的填充与 Parent 的填充混合

Question

我无法理解发生了什么。问题出在 <a> 标签上，我设置了一些 padding 和 radius 使其像一个按钮。但是我看到它像这样溢出容器-

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

这里是react组件-

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>
    )
}

SASS-

@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;
    }
}

Answer 1

问题是 <a></a> 标签默认总是 display: inline。

请尝试将其更改为 display: block 并从那里开始工作。

写了一些基于你的例子：

.top-section {
    text-align: center;
    background: url("https://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG") center bottom/150% 75% no-repeat border-box;
    margin-top: 5%;
}
.top-section img {
        width: 100%;
        margin-bottom: 10%;
    }

 .top-section h1, p, a {
        margin-top: 5%;
        margin-bottom: 5%;
        color: white;
    }
 .top-section h1 {
        font-size: 1.4rem;
        line-height: 1.5;
    }
 .top-section a {
        color: white;
        background: blue;
        padding: 1em 0;
        border-radius: 2em;
        display: block;
        width: 10em;
        margin: auto;
}
    }

<section class="top-section">
  <img class="img-intro" src="" 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>
</section>

Child 的填充与 Parent 的填充混合

Child's padding mixes with Parent's padding

css

sass

padding

reactjs