Padding dan sempadan dalam

Question

Pada asasnya, saya mempunyai dua kotak, satu di dalam satu lagi. Untuk kotak luar, saya menetapkan padding semua teks dalam kepada 10px, tetapi sempadan kotak dalam nampaknya tidak mematuhi peraturan ini.

.plan {
    paparan: blok;
    jidar: 20px 20%;
    lebar: auto;
    sempadan: 2px pepejal;
    jejari sempadan: 5px;
}

.plan * {
    hiasan teks: tiada;
    padding: 0px 10px;
}

.plan * .penerangan {
    sempadan: 2px hitam pejal;
}

Adakah tiada cara untuk memaksa sempadan dalam memulakan 10px dari sebelah kanan sempadan luar?

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

Dalam coretan kod di atas, sifat padding-right digunakan untuk menambah 10 piksel ruang di sebelah kanan kandungan kelas .plan dan sifat margin-right diberikan oleh kelas .description untuk membuat margin dalam bermula di sebelah kanan sempadan luar 10 piksel. Selain itu, menggunakan saiz kotak: kotak sempadan membantu mengekang kandungan dan sempadan kepada lebar kotak luar.

Dengan pelarasan ini, semoga ini membantu anda membuat margin 10 piksel pada kandungan kotak dalam.