패딩 및 내부 테두리

Question

기본적으로 저는 두 개의 상자를 갖고 있습니다. 하나는 다른 하나 안에 있습니다. 외부 상자의 경우 모든 내부 텍스트의 패딩을 10px로 설정했지만 내부 상자의 테두리는 이 규칙을 따르지 않는 것 같습니다.

.plan {
    디스플레이: 블록;
    여백: 20px 20%;
    너비: 자동;
    테두리: 2px 솔리드;
    테두리 반경: 5px;
}

.계획 * {
    텍스트 장식: 없음;
    패딩: 0px 10px;
}

.계획 * .설명 {
    테두리: 2px 단색 검정;
}

내부 테두리가 외부 테두리 오른쪽에서 10픽셀부터 시작되도록 강제하는 방법이 없나요?

Answer 1

으아악

위 코드 조각에서 padding-right 속성은 .plan 클래스의 콘텐츠 오른쪽에 10픽셀의 공간을 추가하는 데 사용되었으며 margin-right 속성은 .description 클래스에서 제공되어 내부 여백이 시작되도록 합니다. 외부 테두리 오른쪽 10픽셀. 또한 box-sizing: border-box;를 사용하면 내용과 테두리를 외부 상자의 너비로 제한하는 데 도움이 됩니다.

이러한 조정을 통해 내부 상자 내용에 10픽셀의 여백을 만드는 데 도움이 되기를 바랍니다.