여백과 여백에 배경색을 설정할 수 있습니까?

Question

<div>의 여백과 패딩을 색칠하여 교육적으로 CSS의 상자 모델을 나타 내기 위해 사용할 수 있습니다. 해당 요소의 색상을 어떻게 설정할 수 있습니까?

Answer 1

패딩 및 여백 속성의 background-color을 설정할 수 없습니다. 그것들은 투명하거나 보이지 않는 것을 의미하며, 위치 지정 목적으로 만 사용됩니다.

그러나이 질문을 여러 번 들었지만 순전히 교육적인 목적으로 패딩과 여백을 보여주고 싶다는 것을 완전히 이해했습니다. 따라서 CSS의 :before 및 :after 가짜 요소를 사용하여 상자 모델을 나타내는 간단한 "해킹"을 만들었습니다.

당신은 나에게 당신이 할 수처럼 보이게하기 위해 약간의 해킹을 제안하지 컬러 패딩이나 마진 만하도록 할 수 있습니다 (자바 스크립트없이!) :

시뮬레이션 상자 모델 :

#box { 
 
    width: 150px; 
 
    height: 150px; 
 
    background: green; 
 
    position: relative; 
 
    border: 10px solid blue; 
 
    left: 50px; 
 
    top: 50px; 
 
} 
 
#box:before { 
 
    background: red; 
 
    content: 'border'; 
 
    display: block; 
 
    position: absolute; 
 
    top: -30px; 
 
    left: -30px; 
 
    right: -30px; 
 
    bottom: -30px; 
 
    z-index: -1; 
 
} 
 
#box:after { 
 
    background: gray; 
 
    content: 'margin'; 
 
    display: block; 
 
    position: absolute; 
 
    top: -50px; 
 
    left: -50px; 
 
    right: -50px; 
 
    bottom: -50px; 
 
    z-index: -2; 
 
}

<div id="box">#box</div>

Answer 2

당신이 찾고있는이 건물은 배경 클립입니다

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 30px; 
 
    border: 30px solid transparent; 
 
    background-color: blue; 
 
} 
 
.test1 {background-clip: content-box;} 
 
.test2 {background-clip: padding-box;} 
 
.test3 {background-clip: border-box;}

<div class="test1"></div> 
 
<div class="test2"></div> 
 
<div class="test3"></div>

단일 DIV

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 30px; 
 
    border: 30px solid transparent; 
 
    background-image: linear-gradient(0deg, yellow, yellow), 
 
         linear-gradient(0deg, green, green), 
 
         linear-gradient(0deg, blue, blue); 
 
    background-clip: content-box, padding-box, border-box; 
 
}

<div></div>

모두 조합

그리고 다른 솔루션