CSS填充 - 底部不起作用

时间：2016-09-13 19:53:21

标签： css 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>

5 个答案:

答案 0 :(得分：2)

填充速记如何运作....

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

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类的顶部或底部填充，您只应用了右/左填充：

.testimonial {
    padding: 0 5%;
}

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

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

如果你想要一直填充相同的填充，删除属性中的第一个0：

.testimonial {
    padding: 5%;
}

如果你想要一个类似的顶部/底部填充，那么只需调整padding属性来添加顶部/底部值：

.testimonial {
    padding: 10% 5%;
}

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

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

答案 1 :(得分：0)

您目前在推荐div的底部没有填充。

$.getJSON("data.json", function(json){

将填充更改为上面的...填充：1％5％;或者专门针对底部...填充0 5％1％; ......做到这一点你应该好好去，除非我误解了你的问题。祝你好运！

答案 2 :(得分：0)

您没有任何底部填充。更改为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>

答案 3 :(得分：0)

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

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

另外，我知道如果只给出两个值，则1st表示顶部和底部。

答案 4 :(得分：0)

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

相关问题
最新问题