고정 크기 이미지 자리 표시 자 공백

Question

고정 크기의 HTML 페이지에 공백을 어떻게 삽입 할 수 있는지 알고 싶습니다. 예를 들면 다음과 같습니다.

<div width="48" height="48"></div> 

하지만 작동하지 않습니다. 그래서 나는이 같은 소스없이 이미지 태그를 추가하는 시도 : 일을하지만 이미지 소스가 없기 때문에 그 안에 아무것도 가진 경우 48x48 광장이 있었다

<img width="48" height="48"> 

. CSS를 사용하여 테두리를 0 픽셀로 변경하고 색상을 흰색으로 설정했지만 작동하지 않고 사각형이 유지됩니다.

그런 다음 중단 태그를 사용해 보았습니다. 그러나 문제는 정확한 48x48 빈 공백을 가질 수 없다는 것입니다.

페이지에 고정 된 크기의 공백을 삽입하는 방법은 무엇입니까?

그리고 왜 내가 공백을 추가할지 궁금하다면. 그 공백에서 약간의 이미지가 나중에 나타나고 그럴 때 거기에 있었던 모든 것들이 이미지를위한 공간을 만들기 위해 아래로 움직이기 때문에 그런 것들이 주위를 돌아 다니고 싶지 않기 때문입니다. 그래서 내 이미지와 같은 크기의 공백을 삽입하고 공백을 이미지로 대체하려고합니다.

div에 공백을 넣고 .innerHTML을 사용하여 div 태그 사이의 코드를 변경하여 공백을 이미지로 대체하려고합니다.

Answer 1

당신은

.virtualPlaceholder { 
    display:block; 
    height:500px; 
    width:500px; 
    background:#eee; 
} 

예 .. 여기 Placehold.it

<img src="http://placehold.it/500x200" />

라는 서비스를 사용하거나에 대한 사용자 정의 CSS를 작성할 수 있습니다 http://jsfiddle.net/rahulrulez/7Ufn6/