填充和内边框

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像素的边距。