여백을 포함하도록 div의 배경 이미지를 설정하는 방법

Question

마진을 포함하여 전체 div를 포함하도록 DIV의 배경 이미지를 설정하려고합니다. 머티리얼 디자인 라이트 프레임 워크를 사용하고 있습니다. 그리고 div35 이미지 영역을 설정하려고합니다. 그 사이에 간격이없는 이미지 그리드가있는 것 같습니다. mdl-cell MDL은 div의 너비를 계산할 때 MDL이 고려해야하기 때문에 여백을 제거하는 것은 효과가 없습니다. MDL을 너무 많이 수정해야 수정 될 수 있습니다.

여기 내 코드입니다. 또한/참조

.project{ 
    background-image:url(https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg); 
    height:200px; 
} 

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" /> 
<div class="project-holder mdl-grid"> 
    <div class="project mdl-cell mdl-cell--3-col" id="cell1">hi</div> 
    <div class="project mdl-cell mdl-cell--3-col" id="cell2">hi</div> 
    <div class="project mdl-cell mdl-cell--3-col" id="cell3">hi</div> 
    <div class="project mdl-cell mdl-cell--3-col" id="cell4">hi</div> 
</div> 

Answer 1

this에서 상호 작용 사실 마진이 불가능하므로 이론적으로 외부 경계에서 공간을 남겨 그러나 우리는 의사 클래스를 사용하여 극복 할 수 있습니다. 다음 링크를 참조하십시오. css [여기] [1]을 (를) 업데이트했습니다.

[1]: https://jsfiddle.net/h1madb61/2/