CSS - 这些额外的10个像素来自哪里？

Question

designated_net_testpage002

你可以在页面上看到，中间有三十个白色像素，我想要二十个。您还可以看到边框未加入。
为什么那些额外的10个像素存在？

Answer 1

试试这个

添加

spotlight-feature-top {
  -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;    //edited 
    border-color: #333333;
    border-image: none;
    border-style: solid;
    border-width: 10px 0 0;
    float: left;                  //edited 
    height: 40px;
    position: relative;
    width: 100%;


}

#spotlight-feature-bottom {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;     //edited 
    border-color: #333333;
    border-image: none;
    border-style: solid;
    border-width: 0 0 10px;
    float: left;                      //edited 
    height: 40px;
    position: relative;
    width: 100%;
}


#spotlight-feature-bottom-title {
    height: 30px;
    margin: 0 auto;            //edited 
    position: relative;
    width: 200px;
    z-index: 3;
}

可以通过

实现相同的结果

#spotlight-feature-bottom-right {right: -50px;}


#spotlight-feature-bottom-left {left: -50px;}

#spotlight-feature-bottom-title {margin: 0 auto;}

原因就是那个

 #spotlight-feature-bottom-title {      margin: 10px auto 0;
                                               ^^^^^
                                              this is the extra 10 px you getting 

结果