填充和內邊框

Question

基本上，我有兩個盒子，一個放在另一個裡面。對於外部盒子，我設定了所有內部文字的內邊距為10px，但是內部盒子的邊框似乎不遵守這個規則。

.plan {
    display: block;
    margin: 20px 20%;
    width: auto;
    border: 2px solid;
    border-radius: 5px;
}

.plan * {
    text-decoration: none;
    padding: 0px 10px;
}

.plan * .description {
    border: 2px solid black;
}

難道沒有一種方法可以強制內部邊框從外部邊框右側開始10px嗎？

Answer 1

.plan {
    display: block;
    margin: 20px 20%;
    width: auto;
    border: 2px solid;
    border-radius: 5px;
    padding-right: 10px; /* İçeriğin sağ tarafına 10px boşluk ekler */
    box-sizing: border-box; /* İçeriğin kutu modelini sınırlar */
}

.plan * {
    text-decoration: none;
    padding: 0px 10px;
}

.plan .description {
    border: 2px solid black;
    margin-right: 10px; /* İç kenarlığı dış sınırdan 10px sağda başlatır */
}

在上述程式碼片段中，padding-right屬性用於在.plan類別的內容右側添加10像素的空間，.description類別給出了margin-right屬性，以使內部邊距在外部邊框的右側開始10像素。此外，使用box-sizing: border-box;有助於將內容和邊框限制在外部盒子的寬度內。

透過這些調整，希望這能幫助您實現在內部盒子的內容中創建一個10像素的邊距。