Rembourrage et bordures intérieures

Question

En gros, j'ai deux boîtes, l'une dans l'autre. Pour la boîte extérieure, j'ai défini le remplissage de tout le texte intérieur sur 10 px, mais les bordures de la boîte intérieure ne semblent pas obéir à cette règle.

.plan {
    bloc de visualisation;
    marge : 20px 20 % ;
    largeur : automatique ;
    bordure : 2px solide ;
    rayon de bordure : 5 px ;
}

.plan * {
    décoration de texte : aucune ;
    remplissage : 0px 10px ;
}

.plan * .description {
    bordure : 2px noir uni ;
}
N'existe-t-il pas un moyen de forcer la bordure intérieure à commencer à 10 px à partir de la droite de la bordure extérieure ? 

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

Dans l'extrait de code ci-dessus, la propriété padding-right est utilisée pour ajouter 10 pixels d'espace à droite du contenu de la classe .plan et la propriété margin-right est donnée par la classe .description pour faire démarrer la marge intérieure à droite de la bordure extérieure 10 pixels. De plus, l'utilisation de box-sizing: border-box; permet de limiter le contenu et les bordures à la largeur de la boîte extérieure.

Avec ces ajustements, j'espère que cela vous aidera à créer une marge de 10 pixels sur le contenu de la boîte intérieure.