我无法在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;
}

<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 填充边距

span对于单独包含文本来说，它不是一个好的元素，因为它是一个“内联”元素，主要用于在较大的块中环绕内容。最好使用段落元素，这些元素是“块级”元素。边距和填充主要作用于块级元素，而不作用于内联元素。您可以通过设置内联元素（如 to 或 even ）来更改它，但对于像您这样的一般内容，首先没有必要使用 span。<p>spandisplay: blockdisplay: inline-block

答：

1赞 programandoconro 10/20/2023 #1

你只是在凌驾于你的风格之上。查看填充的文档以了解其工作原理。基本上，在执行此操作时，您正在重置顶部填充物。因为你只是设置了两次，最后一次是唯一被涂漆的。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赞 Phat Vo 10/20/2023 #2

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

-3赞 Abdur rehman 10/20/2023 #3

您应该使用 div 而不是 span 作为 skillDescription，然后 margin-top 将起作用。跨度主要用于为文本的一部分着色。

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

I can not set Padding or Margins in CSS

评论

评论