CSS div邊界不一致

我有一排水平div。我的問題是，第一個邊框比其他所有邊框都要粗，現在它們和標題之間有一個小小的差距。CSS div邊界不一致

CSS：

.seperate{ 
    background-image: url("midnight.png"); 
    background-repeat: repeat-x; 
    background-attachment: fixed; 
    width: 100px; 
} 
.container{ 
    white-space: nowrap; 
} 
div{ 
    border: 1px solid black; 
    display:inline-block; 
    white-space: normal; 
    height:600px; 
    width: 450px; 
    padding: 10px; 
    padding-top: 0; 
    padding-left: 0;  
    vertical-align: top; 
}

HTML：

<div> 
test 
</div><!-- 

--><div class="seperate"> 
</div>

的jsfiddle：

https://jsfiddle.net/hgpkbqg5/1/

是什麼原因造成這個問題，我該如何解決？

來源

2017-03-25 StarSweeper

那麼，你是應用邊界** **所有元素師。由於第一個元素被另一個div包裹，當然它會有兩倍厚的邊框。其餘的不是因爲父div具有固定的尺寸，這意味着它的邊界不會擴展來包裹所有剩餘的元素。 – Terry

@Terry謝謝你的解釋。我在一週前剛剛開始瞭解這方面的知識，而且我還沒有很好的理解這種東西。 – StarSweeper

使用，

.seperate{ 
    background-image: url("midnight.png"); 
    background-repeat: repeat-x; 
    background-attachment: fixed; 
    width: 100px; 
} 
.container{ 
    white-space: nowrap; 
} 
.container div{ 
    border: 1px solid black; 
    display:inline-block; 
    white-space: normal; 
    height:600px; 
    width: 450px; 
    padding: 10px; 
    padding-top: 0; 
    padding-left: 0;  
    vertical-align: top; 
}

CSS的DIV會影響頁面的所有div包括集裝箱

來源

2017-03-25 10:14:34

問題是否解決？ –

是的，它完美的作品，謝謝！ – StarSweeper

CSS div邊界不一致

回答

相關問題