Polsterung und Innenränder

Question

Im Grunde habe ich zwei Kisten, eine in der anderen. Für das äußere Feld habe ich den Abstand des gesamten inneren Texts auf 10 Pixel eingestellt, aber die Ränder des inneren Felds scheinen dieser Regel nicht zu gehorchen.

.plan {
    Bildschirmsperre;
    Rand: 20px 20%;
    Breite: automatisch;
    Rand: 2 Pixel fest;
    Randradius: 5px;
}

.plan * {
    Textdekoration: keine;
    Polsterung: 0px 10px;
}

.plan * .description {
    Rand: 2 Pixel einfarbig schwarz;
}

Gibt es nicht eine Möglichkeit, den inneren Rand so zu erzwingen, dass er 10 Pixel rechts vom äußeren Rand beginnt?

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