我不能在CSS中设置填充或边距

yc0p9oo0 于 2023-10-21 发布在其他

关注(0)|答案(3)|浏览(110)

我正在做一个投资组合网站我得到了一个错误，
我不能设置一个padding-top或margine顶部到我的文本在这里它看起来像：
Screen look
developer tool look
但我想这样做：What I wanna get

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

<section id="skill">
  <span class="skillTitle">What I do</span> <br />
  <span class="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 class="skillBars"></div>
</section>

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

css

来源：https://stackoverflow.com/questions/77328851/i-can-not-set-padding-or-margins-in-css

3条答案

按热度按时间

gwbalxhn1#

你只是超越了你的风格。检查documentation的填充，看看它是如何工作的。基本上，当你做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的第一个值。

赞(0）回复(0）举报 2023-10-21

csbfibhn2#

添加显示：inline-block到.skillTitle，因为span已显示为inline

赞(0）回复(0）举报 2023-10-21

zynd9foi3#

你应该使用div而不是span作为skillDescription，然后margin-top就可以了。Span主要用于对文本的一部分进行着色。

赞(0）回复(0）举报 2023-10-21