logo标签列表

填充顶部和底部不起作用

htmlcss
3
由于某些原因，padding-top和padding-bottom在我的#functions div中不起作用。
我似乎无法弄清楚是什么原因导致CSS被取消了，但出现了奇怪的是，padding-left和padding-right工作正常。
我希望#functions div看起来像这样： Intended Design of #Vocational 我的HTML或CSS有问题吗？ 我的方法是否错误？ 

* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'gilroysemibold';
    src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
         url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
  .clearfix:after {
  content:" ";
  display:table;
  clear:both;
}
body {
  margin: 0px;
}
#calltoaction {
  background-image: url("calltoactionbackground.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 500px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  text-align: center;
  width: 100%;
}
#calltoaction p {
  margin: auto;
  padding-top: 25px;
  padding-bottom: 55px;
  width: 500px;
}
#functions {
  background-color: #FFFFFF;
  height: 1500px;
  width: 100%;
}
#functions p {
  color: #62CE9C;
}
h1 {
  color: #FFFFFF;
  font-family: 'gilroysemibold';
  font-size: 36px;
  font-weight: normal;
}
h2 {
  color: #62CE9C;
  font-family: 'gilroysemibold';
  font-size: 30px;
  font-weight: normal;
}
h3 {
  color: #00AF78;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 10px;
}
.hashtag {
  color:  #00AF78;
}
#hero {
  background-color: #62CE9C;
  height: 600px;
  float: left;
  margin: 0px;
  padding-bottom: 100px;
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 100px;
  width: 100%;
}
#herotext {
  float: left;
}
#hero h1 {
  width: 470px;
}
#hero img {
  display: block;
  float: right;
}
#hero p {
  padding-top: 30px;
  padding-bottom: 40px;
  width: 500px;
}
input, select, textarea{
    color: #62CE9C;
}

textarea:focus, input:focus {
    color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
color: #62CE9C !important;  
}
 
input:-ms-input-placeholder {  
color: #62CE9C !important;  
}
p {
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 26px;
}
#save {
  float: center;
  margin: auto;
  width: 800px;
}
#savefood {
  float: right;
  margin: auto;
}
#savefoodimage {
  float: right;
}
#savefoodtext {
  float: right;
  height: 300px;
  margin-right: 30px;
  padding-top: 30px;
  width: 290px; 
}
#savemoney {
  float: left;
  margin: auto;
}
#savemoneyimage {
  float: left;
}
#savemoneytext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#savetime {
  float: left;
  margin: auto;
}
#savetimeimage {
  float: left;
}
#savetimetext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#searchbar {
  background-color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  height: 40px;
  padding-left: 15px;
  width: 300px;
}
#searchbutton {
  background-color: #28C787;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 18px;
  height: 40px;
  margin-left: 20px;
  width: 180px;
}
#searchbutton:hover {
  background-color: #00BE8B;
}
#tweetone {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetone img {
  float: left;
  padding-top: 10px;
}
#tweetonetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
#tweettwo {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweettwo img {
  float: left;
  padding-top: 10px;
}
#tweettwotext {
  float: left;
  padding-left: 15px;
  width: 400px;
}
#tweetthree {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetthree img {
  float: left;
  padding-top: 10px;
}
#tweetthreetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
ul {
  list-style-type: none;
}
#vocational {
  background-color: #62CE9C;
  display: inline-block;
  height: 1120px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  width: 100%;
}
#vocational h1 {
  margin: auto;
  text-align: center;
  margin-bottom: 0px;
  width: 500px;
}
#vocational p {
  color: #62CE9C;
  display: inline-block;
}
<!DOCTYPE html>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  </head>
  <body>
    <div id="hero">
      <div id="herotext">
        <h1>Make the Most of your Food With Pantree</h1>
        <p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
        <form id="form">
          <input id="searchbar" type="text" placeholder="yourname@email.com"/>
          <input id="searchbutton" type="submit" value="Get Early Access" />
        </form>
      </div>
      <img src="images/phone.png"/>
    </div>
    <div id="functions">
      <div id=save>
        <div id="savemoney">
          <img id="savemoneyimage" src="images/savemoney.png"/>
          <div id="savemoneytext">
            <h2>Save Money</h2>
            <p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
          </div>
        </div>  
        <div id="savefood">
          <img id="savefoodimage" src="images/savefood.png"/>
          <div id="savefoodtext">
            <h2>Save Food</h2>
            <p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
          </div>
        </div>
        <div id="savetime">
          <img id="savetimeimage" src="images/savetime.png"/>
          <div id="savetimetext">
            <h2>Save Time</h2>
            <p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
          </div>
        </div>  
      </div>  
    </div>
    <div id="vocational">
      <h1>These Folks Could Use Pantree Every Day</h1>
      <ul>
        <li>
          <div id="tweetone">
            <img src="images/tweetone.png"/>
            <div id="tweetonetext">
              <h3>Kat</h3>
              <h3>@devicat</h3>
              <p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
            </div>          
          </div>  
        </li>
        <li>
          <div id="tweettwo">
            <img src="images/tweettwo.png"/>
            <div id="tweettwotext">
              <h3>Jack Falahee</h3>
              <h3>@RestingPlatypus</h3>
              <p>Dear Mom, How do I organize my kitchen? Love, me</p>
            </div>
          </div>
        </li>
        <li>
          <div id="tweetthree">
            <img src="images/tweetthree.png"/>
            <div id="tweetthreetext">
              <h3>mason ryan</h3>
              <h3>@MasonTheManiac</h3>
              <p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
            </div>  
          </div>  
        </li>
      </ul>
    </div>
    <div id="calltoaction">
      <h1>Manage your Kitchen, Effortlessly</h1>
      <p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
      <form id="form">
        <input id="searchbar" type="text" placeholder="yourname@email.com"/>
        <input id="searchbutton" type="submit" value="Get Early Access" />
      </form>
    </div>
  </body>
</html>

2
你是否试图使用填充来垂直居中？因为通常这并不是正确的方法。可以在本网站或谷歌上搜索各种垂直居中的方法。 - DBS
如果你要使用 display: table，请阅读此文：https://css-tricks.com/almanac/properties/d/display/ -- 它更像是一个元素系统（table-row、table column等）-- 如果你想使用 padding 来间隔元素，请尝试使用 block 或 inline block。 - Glenn Ferrie
@DBS 我实际上是想要改变 div 元素中各个元素之间的白色空间的高度，而不是垂直居中。如果你注意到每个模块在结束前都有足够的空间，这就是我想要做的。这只是一个设计问题，我认为这样看起来更好，与居中无关。 - Alison Dyer
哇！我刚意识到我错误地将我的#functions div称为#vocational，这是我网站上完全不同的div的名称！对于造成的混淆，我非常抱歉，很高兴看到这么多人能够解决问题。我很抱歉在发布之前没有注意到这一点。 - Alison Dyer
2个回答
3
这可以通过使用 CSS Flexbox 来实现。
参考代码应该类似于：
```css /* 这里是 CSS 代码 */ ```
#savefood, #savemoney, #savetime {
  display: flex;
  justify-content: center;
  align-items: center;
}

#savefood {
  flex-direction: row-reverse;
}

请查看下面的代码片段（请使用全屏模式以正确查看）：

* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'gilroysemibold';
    src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
         url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
  .clearfix:after {
  content:" ";
  display:table;
  clear:both;
}
body {
  margin: 0px;
}
#calltoaction {
  background-image: url("calltoactionbackground.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 500px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  text-align: center;
  width: 100%;
}
#calltoaction p {
  margin: auto;
  padding-top: 25px;
  padding-bottom: 55px;
  width: 500px;
}
#functions {
  background-color: #FFFFFF;
  height: 1500px;
  width: 100%;
}
#functions p {
  color: #62CE9C;
}
h1 {
  color: #FFFFFF;
  font-family: 'gilroysemibold';
  font-size: 36px;
  font-weight: normal;
}
h2 {
  color: #62CE9C;
  font-family: 'gilroysemibold';
  font-size: 30px;
  font-weight: normal;
}
h3 {
  color: #00AF78;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 10px;
}
.hashtag {
  color:  #00AF78;
}
#hero {
  background-color: #62CE9C;
  height: 600px;
  float: left;
  margin: 0px;
  padding-bottom: 100px;
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 100px;
  width: 100%;
}
#herotext {
  float: left;
}
#hero h1 {
  width: 470px;
}
#hero img {
  display: block;
  float: right;
}
#hero p {
  padding-top: 30px;
  padding-bottom: 40px;
  width: 500px;
}
input, select, textarea{
    color: #62CE9C;
}

textarea:focus, input:focus {
    color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
color: #62CE9C !important;  
}
 
input:-ms-input-placeholder {  
color: #62CE9C !important;  
}
p {
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 26px;
}
#save {
  float: center;
  margin: auto;
  width: 800px;
}
#savefood {
  float: right;
  margin: auto;
}
#savefoodimage {
  float: right;
}
#savefoodtext {
  float: right;
  height: 300px;
  margin-right: 30px;
  padding-top: 30px;
  width: 290px; 
}
#savemoney {
  float: left;
  margin: auto;
}
#savemoneyimage {
  float: left;
}
#savemoneytext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#savetime {
  float: left;
  margin: auto;
}
#savetimeimage {
  float: left;
}
#savetimetext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#searchbar {
  background-color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  height: 40px;
  padding-left: 15px;
  width: 300px;
}
#searchbutton {
  background-color: #28C787;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 18px;
  height: 40px;
  margin-left: 20px;
  width: 180px;
}
#searchbutton:hover {
  background-color: #00BE8B;
}
#tweetone {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetone img {
  float: left;
  padding-top: 10px;
}
#tweetonetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
#tweettwo {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweettwo img {
  float: left;
  padding-top: 10px;
}
#tweettwotext {
  float: left;
  padding-left: 15px;
  width: 400px;
}
#tweetthree {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetthree img {
  float: left;
  padding-top: 10px;
}
#tweetthreetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
ul {
  list-style-type: none;
}
#vocational {
  background-color: #62CE9C;
  display: inline-block;
  height: 1120px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  width: 100%;
}
#vocational h1 {
  margin: auto;
  text-align: center;
  margin-bottom: 0px;
  width: 500px;
}
#vocational p {
  color: #62CE9C;
  display: inline-block;
}

#savefood,
#savemoney,
#savetime{
  display: flex;
  justify-content: center;
  align-items: center;
}

#savefood {
  flex-direction: row-reverse;
}
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  </head>
  <body>
    <div id="hero">
      <div id="herotext">
        <h1>Make the Most of your Food With Pantree</h1>
        <p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
        <form id="form">
          <input id="searchbar" type="text" placeholder="yourname@email.com"/>
          <input id="searchbutton" type="submit" value="Get Early Access" />
        </form>
      </div>
      <img src="images/phone.png"/>
    </div>
    <div id="functions">
      <div id=save>
        <div id="savemoney">
          <img id="savemoneyimage" src="http://placehold.it/200/200"/>
          <div id="savemoneytext">
            <h2>Save Money</h2>
            <p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
          </div>
        </div>  
        <div id="savefood">
          <img id="savefoodimage" src="http://placehold.it/200/200"/>
          <div id="savefoodtext">
            <h2>Save Food</h2>
            <p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
          </div>
        </div>
        <div id="savetime">
          <img id="savetimeimage" src="http://placehold.it/200/200"/>
          <div id="savetimetext">
            <h2>Save Time</h2>
            <p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
          </div>
        </div>  
      </div>  
    </div>
    <div id="vocational">
      <h1>These Folks Could Use Pantree Every Day</h1>
      <ul>
        <li>
          <div id="tweetone">
            <img src="images/tweetone.png"/>
            <div id="tweetonetext">
              <h3>Kat</h3>
              <h3>@devicat</h3>
              <p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
            </div>          
          </div>  
        </li>
        <li>
          <div id="tweettwo">
            <img src="images/tweettwo.png"/>
            <div id="tweettwotext">
              <h3>Jack Falahee</h3>
              <h3>@RestingPlatypus</h3>
              <p>Dear Mom, How do I organize my kitchen? Love, me</p>
            </div>
          </div>
        </li>
        <li>
          <div id="tweetthree">
            <img src="images/tweetthree.png"/>
            <div id="tweetthreetext">
              <h3>mason ryan</h3>
              <h3>@MasonTheManiac</h3>
              <p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
            </div>  
          </div>  
        </li>
      </ul>
    </div>
    <div id="calltoaction">
      <h1>Manage your Kitchen, Effortlessly</h1>
      <p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
      <form id="form">
        <input id="searchbar" type="text" placeholder="yourname@email.com"/>
        <input id="searchbutton" type="submit" value="Get Early Access" />
      </form>
    </div>
  </body>
</html>

希望这有所帮助！
@AlisonDyer 不客气！ - Saurav Rastogi
2
为了添加填充，让你的元素 display: block，如果你的方法是垂直对齐，请将其设置为 display: flex; align-items: center 并给父元素一个 height。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接