【问题标题】:Trying to remove padding from my h2 titles试图从我的 h2 标题中删除填充
【发布时间】:2015-02-13 09:16:16
【问题描述】:

您好,我正在尝试将我的 h2 标题放在它们所在的 div 的顶部,但我不知道如何删除填充/边距/导致它们被隔开的任何东西至今。

这是我第一次尝试使用“部分”,我正在使用它们来创建视差滚动网站。我已经上传了这个网站,所以你可以看到它的实际效果。在它声明“标题一”、“标题二”等的地方,这就是我想要在它们所在的 div 顶部提出的内容。

示例网站网址...http://www.littleroomproductions.com/jQtest/

以下是我认为需要更改的代码部分,以便将标题带到 div 的顶部...

//HTML

   <section class="box content">
    <div id="me"></div>
    <div class="container">
      <h2>Title One</h2>

      <p>This is where text goes </p>
            <div class="someContent">
                <p>click me</p>
            </div>
    </div>
  </section>

//使用的CSS

section.box:last-child {
margin-bottom: 0;
}

section.box h2 {
padding-top: 0;
margin-bottom: 20px;
color: #606060;
font-family: serif;
font-size: 30px;
}

section.box p {
padding-top: 0;
margin-bottom: 20px;
color: black;
font-size: 20px;
font-family: cursive;
font-weight: 300;
}

section.box p:last-child {
margin-bottom: 300px;
}

section.box.content {
padding-top: 0;
padding-left: 40px;
padding-bottom: 40px;
 }

section.box.slide {
padding: 240px 0;
background-position: 0 0;
}

section.box.slide h1 {
color: yellow;
font-size: 48px;
/*line-height: 1;*/
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px black;
}

【问题讨论】:

  • 您的演示链接已损坏。
  • 修复了示例的链接

标签: html css margin padding


【解决方案1】:

你的

#me #projects #hire 有一个 100px 的 padding-top;

【讨论】:

  • 是的,这是为了让顶部的导航栏跳转到具有适当填充量的内容。更改这些边距不会将我的标题带到白色背景 div 的顶部
  • 该 div 没有边距,只有 padding-top。删除该 padding-top 将使您的标题升至顶部。
  • 哦,我现在明白了。所以我应该添加一个margin-top来替换它,这样我的导航栏就会从固定导航栏跳到60px以下?
  • 该死,margin-top 只是添加了与 padding-top 相同的东西。我希望我可以告诉 a href="#me" 跳转到那个 id 然后向下 100px
【解决方案2】:

试试这个

section.box h2 {
padding-top: 0;
margin: -7px 0;
color: #606060;
font-family: serif;
font-size: 30px;
}

【讨论】:

  • 没有完全提出来,如果我增加边距,下面的文字开始与标题重叠
  • 对不起,我试图在没有正确的演示链接的情况下回答。
猜你喜欢
  • 1970-01-01
  • 2019-04-20
  • 2012-12-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-09
  • 1970-01-01
相关资源
最近更新 更多