Padding and inner borders

Question

Basically, I have two boxes, one inside the other. For the outer box, I set the padding of all inner text to 10px, but the inner box's borders don't seem to obey this rule.

.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;
}

Isn't there a way to force the inner border to start 10px from the right of the outer border?

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 */
}

In the above code snippet, the padding-right attribute is used to add 10 pixels of space to the right of the content of the .plan class, and the margin-right attribute is given by the .description class to make the inner margin to the right of the outer border Start 10 px from the side. Additionally, using box-sizing: border-box; helps constrain the content and borders to the width of the outer box.

With these adjustments, hopefully this helps you achieve creating a 10 pixel margin on the content of the inner box.