css - CSS - これらの余分な 10 ピクセルはどこから来ているのですか?

Question

指定された_net_testpage002

ページを見るとわかるように、真ん中に 30 個の白いピクセルがあり、20 個必要です。また、境界が結合していないこともわかります。
これらの余分な 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 

結果