패딩 및 내부 테두리
P粉448130258
2023-08-17 12:46:37
<p>기본적으로 저는 두 개의 상자를 갖고 있습니다. 하나는 다른 하나 안에 있습니다. 외부 상자의 경우 모든 내부 텍스트의 패딩을 10px로 설정했지만 내부 상자의 테두리는 이 규칙을 따르지 않는 것 같습니다. </p>
<pre class="brush:php;toolbar:false;">.plan {
디스플레이: 블록;
여백: 20px 20%;
너비: 자동;
테두리: 2px 솔리드;
테두리 반경: 5px;
}
.계획 * {
텍스트 장식: 없음;
패딩: 0px 10px;
}
.계획 * .설명 {
테두리: 2px 단색 검정;
}</pre>
<p>내부 테두리가 외부 테두리 오른쪽에서 10픽셀부터 시작되도록 강제하는 방법이 없나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
으아악
위 코드 조각에서 padding-right 속성은 .plan 클래스의 콘텐츠 오른쪽에 10픽셀의 공간을 추가하는 데 사용되었으며 margin-right 속성은 .description 클래스에서 제공되어 내부 여백이 시작되도록 합니다. 외부 테두리 오른쪽 10픽셀. 또한 box-sizing: border-box;를 사용하면 내용과 테두리를 외부 상자의 너비로 제한하는 데 도움이 됩니다.
이러한 조정을 통해 내부 상자 내용에 10픽셀의 여백을 만드는 데 도움이 되기를 바랍니다.