텍스트가 비어있을 때 CSS 배경 이미지 크기가 작동하지 않습니다.

Question

아래는 내가 보여 주려고하는 배경 이미지의 CSS입니다. 내 페이지의 드래그 가능한 요소에 대해 사용자가 항목을 드래그 할 수 있도록 Drag handle을 표시하는 데 사용됩니다.

제 문제는 background-size: 16px 16px;이나 width: 16px; heith: 16px;입니다.

내 텍스트가없는 경우 페이지에 아무 것도 표시되지 않습니다. <span> 빈 스팬 태그를 만들 때이 배경 이미지를 표시하도록 설정 한 너비를 어떻게 만들 수 있는지 알아야합니까?

http://codepen.io/jasondavis/pen/Hnyjf

HTML ...

<div class="tools"> 

    <span class="handle"></span> 

    <a href="#" class="collapse">-</a> 

</div> 

CSS ...

.handle { 
    cursor: move; 
    position: relative; 
    top: -4px; 
    padding-top: 10px; 
    width: 16px; 
    height: 16px; 
    background-size: 16px 16px; 
    background-image: 
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzM3NDRFNERCMTFBMTFFMkE2QUJFMTNBNTEzQzEzMUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzM3NDRFNEVCMTFBMTFFMkE2QUJFMTNBNTEzQzEzMUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMzc0NEU0QkIxMUExMUUyQTZBQkUxM0E1MTNDMTMxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMzc0NEU0Q0IxMUExMUUyQTZBQkUxM0E1MTNDMTMxRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoCwBg8AAAAsSURBVHjaYqyurv7PAAGMUJooPhMDmYAFySQGNJPx8imycdSPo34kHQAEGACMAxGhnEmydQAAAABJRU5ErkJggg==); 
} 

Answer 1

빈 인라인 요소가되지 않은 폭을 가지고 있기 때문에. 요소를 인라인 블록 요소로 설정할 수 있습니다.

.handle { 
    display: inline-block; 
}