Почему в Javascript есть дополнительное пространство?

Я пытался понять это, но я отказываюсь от него через 4 часа копания и смотрю на свой код !.Почему в Javascript есть дополнительное пространство?

Код:

<!DOCTYPE html> 
<html> 
<head> 
<title>Listening to DOM events</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
html,body,#map-canvas { 
    height: 100%; 
    width: 100%;  
    margin: 0; 
    padding: 0; 
} 

.controls { 
    margin-top: 0px; 
    border: 1px solid transparent; 
    border-radius: 2px 0 0 2px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height: 32px; 
    outline: none; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 

#pac-input { 
    background-color: #fff; 
    font-family: Roboto; 
    font-size: 15px; 
    font-weight: 300; 
    margin-left: 5px; 
    padding: 0 11px 0 13px; 
    text-overflow: ellipsis; 
    width: 240px; 
} 

#pac-input:focus { 
    border-color: #4d90fe; 
} 

.pac-container { 
    font-family: Roboto; 
} 

#type-selector { 
    color: #fff; 
    background-color: #4d90fe; 
    padding: 5px 11px 0px 11px; 
} 

#type-selector label { 
    font-family: Roboto; 
    font-size: 13px; 
    font-weight: 300; 
} 
</style> 

<title>Places search box</title> 


<script 

    src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 

<script> 

var map; 
var marker; 
var latLng; 

function initialize() { 

     var myLatlng = new google.maps.LatLng(xxxx, -xxxxx); 
     var mapOptions = { 
     zoom: 10, 
     mapTypeControl: false, 
     navigationControl: false, 
     scrollwheel: false, 
     scaleControl: true, 
     center: myLatlng 
    }; 

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

} //End of OnStart 


google.maps.event.addDomListener(window, 'load', initialize); 


</script> 

    <style> 
     #panel { 
     position: absolute; 
     top: 0px; 
     left: 50%; 
     margin-left: -180px; 
     width: 240px; 
     z-index: 5; 
     background-color: #00ffec; 
     padding: 5px; 
     border: 1px solid #999; 
     } 
     #latlng { 
     width: 240px; 
     } 

     #target { 
     width: 240px; 
     } 

    </style> 

    </head> 
    <body> 
    <div> 
     <input id="pac-input" class="controls" type="text" placeholder=""> 
     <input type="button" value="Clear" style="Float:right" style="width:60px; height:40px" 
                       onclick="Clear_SearchText()">  
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

Может кто-то пожалуйста, помогите мне понять, почему есть дополнительное пространство захвата моего макета пространства ????

Большое спасибо

Edit: Re-закачано более полную картину.

источник

2015-08-12 User2014

Это в DIV, который содержит текстовое поле и кнопку .... –

http://jsfiddle.net/arunpjohny/ny1jz245/1/ –

Да, может быть, вопрос не ясно но я не понимаю путаницы. Вводимое текстовое поле создает вертикальное пространство, и кнопка имеет значение float right, что дает вам горизонтальное пространство. Нет тайны? – Ghazgkull

Контейнер div текста input и кнопка input будет занимать это место. Простейшим было бы установить кнопку input или div высоту для соответствия. Пример сделать кнопку, чтобы соответствовать:

Добавить идентификатор на кнопку, чтобы ссылаться на него: высота

<input id="clearbutton" type="button" value="Clear" style="Float:right" style="width:60px; height:40px" onclick="Clear_SearchText()">

Установить в CSS:

<style> 
#clearbutton { 
    height: 32px; 
} 
</style>

Пример: http://jsfiddle.net/ddan/pqdtgmdp/1/

EDIT

Так на основе ваш полный пример:

<!DOCTYPE html> 
<html> 
<head> 
<title>Listening to DOM events</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
html,body,#map-canvas { 
    height: 100%; 
    width: 100%;  
    margin: 0; 
    padding: 0; 
} 

.controls { 
    margin-top: 0px; 
    border: 1px solid transparent; 
    border-radius: 2px 0 0 2px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height: 32px; 
    outline: none; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 

#pac-input { 
    background-color: #fff; 
    font-family: Roboto; 
    font-size: 15px; 
    font-weight: 300; 
    margin-left: 5px; 
    padding: 0 11px 0 13px; 
    text-overflow: ellipsis; 
    width: 240px; 
} 

#pac-input:focus { 
    border-color: #4d90fe; 
} 

.pac-container { 
    font-family: Roboto; 
} 

#type-selector { 
    color: #fff; 
    background-color: #4d90fe; 
    padding: 5px 11px 0px 11px; 
} 

#type-selector label { 
    font-family: Roboto; 
    font-size: 13px; 
    font-weight: 300; 
} 
</style> 

<title>Places search box</title> 


<script 

    src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 

<script> 

var map; 
var marker; 
var latLng; 

function initialize() { 

     var myLatlng = new google.maps.LatLng(xxxx, -xxxxx); 
     var mapOptions = { 
     zoom: 10, 
     mapTypeControl: false, 
     navigationControl: false, 
     scrollwheel: false, 
     scaleControl: true, 
     center: myLatlng 
    }; 

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

} //End of OnStart 


google.maps.event.addDomListener(window, 'load', initialize); 


</script> 

    <style> 
     #panel { 
     position: absolute; 
     top: 0px; 
     left: 50%; 
     margin-left: -180px; 
     width: 240px; 
     z-index: 5; 
     background-color: #00ffec; 
     padding: 5px; 
     border: 1px solid #999; 
     } 
     #latlng { 
     width: 240px; 
     } 

     #target { 
     width: 240px; 
     } 

     #clearbutton, #pac-input{ 
     height: 32px; 
     } 
    </style> 
    </head> 
    <body> 
    <div> 
     <input id="pac-input" class="controls" type="text" placeholder=""> 
     <input id="clearbutton" type="button" value="Clear" style="Float:right" style="width:60px; height:40px" 
                       onclick="Clear_SearchText()">  
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

источник

2015-08-12 04:02:39 DDan

Спасибо за ответ, но я понятия не имею, как использовать css, когда я начал изучать Javascript несколько дней назад. Я использую Eclipse для кода Javascript. Я использую этот Javascript для создания карту для моего личного приложения для Android. Можете ли вы показать мне, как поместить это в Javascript? Может быть, вы можете показать мне, как использовать css? Я очень ценю вашу помощь. – User2014

Я подозревал, что вы новичок в этих вещах, поэтому я поместил код css в теги '