CSS 填充底部不起作用

Question

我目前正在尝试在我的推荐元素底部添加一些简单的填充，这样它就不会在文本之后立即结束。

看来无论我在padding或padding-bottom中输入什么值，bottom padding都会扩展一个设定的量。我想知道如何解决这个问题，以便它显示特定于我设置的值的填充。

/****
GENERAL
****/

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: black;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 120px;
}

li {
    list-style: none;
    
}

a, a:visited {
    text-decoration: none;
    color: black;
    cursor: pointer;
}

a:hover {
    color: #009999;
}

.divide {
    width: 75%;
    border: 1px solid grey;
    margin: 20px auto;
    
}

/****
NAVIGATION
****/

.navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 1000;
}

.navigation li {
    display: inline-block;
    padding: 5px;
}

.navigation li a {
    padding: 8px 10px;
    display: block;
}

.submenu {
    position: relative
}

.sub-hover {
    position: absolute;
    width: 106.42px;
    display: none;
}

.sub-hover a {
    font-size: 1em;
}

.submenu:hover ~ .sub-hover,
.sub-hover:hover {
    display: block;
    background-color: rgba(38, 12, 12, 0.04);
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
}

/****
LOGO
****/

.circle {
    border: 1px solid gray;
    border-radius: 100%;
    height: 90px;
    width: 90px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    clear: both;
}

/****
IMAGE SLIDER
****/

.main-gallery {
    background-color: rgba(38, 12, 12, 0.03);
    border-radius: 5px;
    height: 450px;
    clear: both;
    margin-bottom: 25px;
}

/****
TESTIMONIAL
****/

.testimonial {
    clear: both;
    display: block;
    margin: 10px 0;
    padding: 0 5%;
    background-color: rgba(50, 173, 140, 0.82);
}

/****
SOCIAL
****/

.insta {
    height: 50px;
    width: 90%;
    background-color: blue;
    margin: 10px auto;
}



/****
FOOTER
****/

.footer {
    background-color: grey;
    height: 100px;
    clear: both;
    bottom: 0;
    position: absolute;
}

.footer p {
    text-align: center;
    padding: 20px;
}

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="css/normalize.css">
    <link type="text/css" rel="stylesheet" href="css/skeleton.css">
    <link type="text/css" rel="stylesheet" href="css/main.css">
  </head>

  <body>
  
          <ul class="navigation six columns offset-by-three">
              <li><a href="#" style="color: #009999">HOME</a></li>
              <li><a href="portfolio.html" class="submenu">PORTFOLIO</a>
                  <div class="sub-hover">
                    <a href="portfolio/photo.html">Photos</a>
                    <a href="portfolio/physical.html">Physical</a>
                    <a href="portfolio/write.html">Write</a>
                    <a href="portfolio/studies.html">Studies</a>
                  </div>
              </li>
              <li><a href="about.html">ABOUT</a></li>
              <li><a href="contact.html">CONTACT</a></li>
          </ul>
      
      <div id="logo">
        <div class="circle">
        </div>
      </div>
    
    <div class="main-gallery eleven columns offset-by-half">
          <div id="main-images">
            <img src=""/>
            <img src=""/>
            <img src=""/>
            <img src=""/>
          </div>
    </div>
    
    <div class="testimonial">
        <div class="test-text">          
            <p><b>Joe Blogs</b></p>
            <p>Distinguished Person</p>
            <p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
        </div>
    </div>
      
    <div class="divide"></div>
      
    <div class="insta">
        
        
    </div>
      
    <div class="footer twelve columns">
        <p>Jacob Riman Design</p>
      
    </div>
    
  </body>
  
</html>

Answer 1

您目前在评价的底部没有填充 div。

.testimonial {
   clear: both;
   display: block;
   margin: 10px 0;
   padding: 1% 5%;
   background-color: rgba(50, 173, 140, 0.82);
}

将padding改成上面的... padding: 1% 5%;或者专门针对底部 ... padding 0 5% 1%; ......这样做，你应该好好去，除非我误解了你的问题。祝你好运！

Answer 2

您没有任何底部填充。更改为 padding: 10px 5% 在顶部和底部添加 10px 填充，在左侧和右侧添加 5%。

/****
GENERAL
****/

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: black;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 120px;
}

li {
    list-style: none;
    
}

a, a:visited {
    text-decoration: none;
    color: black;
    cursor: pointer;
}

a:hover {
    color: #009999;
}

.divide {
    width: 75%;
    border: 1px solid grey;
    margin: 20px auto;
    
}

/****
NAVIGATION
****/

.navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 1000;
}

.navigation li {
    display: inline-block;
    padding: 5px;
}

.navigation li a {
    padding: 8px 10px;
    display: block;
}

.submenu {
    position: relative
}

.sub-hover {
    position: absolute;
    width: 106.42px;
    display: none;
}

.sub-hover a {
    font-size: 1em;
}

.submenu:hover ~ .sub-hover,
.sub-hover:hover {
    display: block;
    background-color: rgba(38, 12, 12, 0.04);
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
}

/****
LOGO
****/

.circle {
    border: 1px solid gray;
    border-radius: 100%;
    height: 90px;
    width: 90px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    clear: both;
}

/****
IMAGE SLIDER
****/

.main-gallery {
    background-color: rgba(38, 12, 12, 0.03);
    border-radius: 5px;
    height: 450px;
    clear: both;
    margin-bottom: 25px;
}

/****
TESTIMONIAL
****/

.testimonial {
    clear: both;
    display: block;
    margin: 10px 0;
    padding: 10px 5%;
    background-color: rgba(50, 173, 140, 0.82);
}

/****
SOCIAL
****/

.insta {
    height: 50px;
    width: 90%;
    background-color: blue;
    margin: 10px auto;
}



/****
FOOTER
****/

.footer {
    background-color: grey;
    height: 100px;
    clear: both;
    bottom: 0;
    position: absolute;
}

.footer p {
    text-align: center;
    padding: 20px;
}

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="css/normalize.css">
    <link type="text/css" rel="stylesheet" href="css/skeleton.css">
    <link type="text/css" rel="stylesheet" href="css/main.css">
  </head>

  <body>
  
          <ul class="navigation six columns offset-by-three">
              <li><a href="#" style="color: #009999">HOME</a></li>
              <li><a href="portfolio.html" class="submenu">PORTFOLIO</a>
                  <div class="sub-hover">
                    <a href="portfolio/photo.html">Photos</a>
                    <a href="portfolio/physical.html">Physical</a>
                    <a href="portfolio/write.html">Write</a>
                    <a href="portfolio/studies.html">Studies</a>
                  </div>
              </li>
              <li><a href="about.html">ABOUT</a></li>
              <li><a href="contact.html">CONTACT</a></li>
          </ul>
      
      <div id="logo">
        <div class="circle">
        </div>
      </div>
    
    <div class="main-gallery eleven columns offset-by-half">
          <div id="main-images">
            <img src=""/>
            <img src=""/>
            <img src=""/>
            <img src=""/>
          </div>
    </div>
    
    <div class="testimonial">
        <div class="test-text">          
            <p><b>Joe Blogs</b></p>
            <p>Distinguished Person</p>
            <p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
        </div>
    </div>
      
    <div class="divide"></div>
      
    <div class="insta">
        
        
    </div>
      
    <div class="footer twelve columns">
        <p>Jacob Riman Design</p>
      
    </div>
    
  </body>
  
</html>

Answer 3

.testimonial {
    clear: both;
    display: block;
    margin: 10px 0;
    padding: 0 5% 5% 0;
    background-color: rgba(50, 173, 140, 0.82);
}

将所有值相加（即使为 0）立即解决了问题。

此外，我知道如果只给出两个值，第一个代表顶部和底部。

Answer 4

填充 shorthand 的工作原理....

填充的默认声明如下所示：

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

你可以简化它并在所有边上均匀地应用填充：

padding: 10px;

您可以少一些缩写，并对顶部和底部、右侧和左侧应用不同的值。

这相当于padding: top/bottom right/left;

padding: 10px 20px;

您可以使用完整的缩写词将不同的值分别应用到 4 个边中的每一个：

这等同于 padding: top right bottom left; 或：

padding: 10px 20px 5px 20px;

在您的 CSS 中，您没有对 testimonial class 应用顶部或底部填充，您只应用了 right/left 填充：

.testimonial {
    padding: 0 5%;
}

你基本上有（以伪代码为例）：

.testimonial {
    padding: top=0 right=5% bottom=0 left=5%;
}

如果你想一直使用相同的填充，请删除属性:

中的第一个 0

.testimonial {
    padding: 5%;
}

如果您想要类似的 top/bottom 填充，则只需调整填充属性以添加 top/bottom 值：

.testimonial {
    padding: 10% 5%;
}

如果您想要在顶部和底部使用 不同的 填充，则调整填充属性以添加所有值：

.testimonial {
    padding: 0 5% 10% 5%;
}

Answer 5

发现.testimonial 中的最后一组文本在段落标记中，它正在插入一个换行符。所以简单地把它拿走了，现在它似乎工作正常。

CSS 填充底部不起作用

CSS padding-bottom not working

css

padding