我无法在CSS中设置填充或边距

Question

我正在制作一个投资组合网站，但出现错误，

我无法为我的文本设置 padding-top 或 margine top 它看起来像：

但我想得到这样的：

这是我的 React JS 代码：

<section id="skill">
        <span className="skillTitle">What I do</span> <br />
        <span className="skillDescription">I am a passionate web developer and UI/UX designer, dedicated to creating intuitive, user-friendly interfaces and seamless web experiences. My expertise lies in crafting visually appealing websites with a focus on functionality and accessibility.</span>
        <div className="skillBars">

我的CSS：

#skill {
    overflow: hidden;
    width: 100vw;
    max-width: 65rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    padding-top: 3rem;
}

.skillTitle {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-top: 3rem; /* Add padding-top here */
}

.skillDescription {
    padding-top: 1rem;
    margin-top: 1rem;
    margin-top: 3rem;
    color: darkgrey;
    font-weight: 100;
    font-size: 1rem;
    font-style: italic;
    max-width: 50rem;
    padding: 0 2rem;
}

我想知道为什么会发生这种情况以及如何修复他的这个错误！

Answer 1

在.skillTitle中添加display: inline-block，因为span已显示inline

Answer 2

你只是超越了你的风格。 检查填充的文档以了解它是如何工作的。基本上，当执行

padding: 0 2rem;

时，您正在重置顶部填充。对于

margin-top

，您只需设置两次，最后一个是唯一被绘制的。

.skillDescription {
    padding-top: 1rem; <- this gets override by last line ------
    margin-top: 1rem; <- this gets override by next line       |
    margin-top: 3rem;                                          |
    color: darkgrey;                                           |
    font-weight: 100;                                          |
    font-size: 1rem;                                           |
    font-style: italic;                                        |
    max-width: 50rem;                                          |
    padding: 0 2rem;  < ---------------------------------------
}

要解决这个问题，你可以这样做：

.skillDescription {
    margin-top: 3rem;
    color: darkgrey;
    font-weight: 100;
    font-size: 1rem;
    font-style: italic;
    max-width: 50rem;
    padding: 1rem 2rem;
}

如果您想要顶部底部有更多填充，可以更改

padding

第一个值。