Как установить ширину и высоту контейнера div?

Question

я следующее:

<div id="container"> 
    <img src="pic.png"> 
</div> 

Это стиль следующим образом:

#container { 
    height: 50px; 
    width: 50px; 
} 

В дополнении к этому, у меня есть некоторые яваскрипта повозка, запряженные волы, чтобы вызвать изображение появиться мертвым в вмещающих делах, если margin-top и margin-left.

Когда я смотрю на это в веб-инспекторе Chrome, ясно, что содержащий div не начинается в верхней части его родителя. Я подозреваю, что изображение помещается относительно родителя контейнера div.

Проблема в том, что я хочу, чтобы контейнер div был целью для событий щелчка, таких как перетаскивание. Div только начинается в верхней части изображения, когда я хочу, чтобы он начинался над изображением и включал пространство с краем в качестве части контейнера. Любой совет?

Answer 1

@plalx правильно вы используете неправильный селектор, вы должны просто сделать это:

#container{ 
    width: 50px; 
    height: 50px; 
    padding: 5px; 
} 

padding является то, что ищете с созданием DIV больше, то изображение для мыши. margin определяет место на странице, padding определяет пространство на странице за пределами ваших height и width атрибутов.

См. http://jsfiddle.net/VRJUc/. Если вы откроете инспектор элементов (хром) и посмотрите на фактический размер div, вы увидите, что это действительно 60x60, потому что я добавил 5px отступов с каждой стороны.