如何避免CSS中的文字和地图重叠？

Question

我正在一个网站上创建一个地图，该地图计算到当前位置的距离。地图工作正常。现在，我想在下面添加文本，但由于某些原因，该文本与地图重叠。

为此的小提琴是http://jsfiddle.net/b0zcw415/4/embedded/result

问题陈述：

我想知道无论在地图下方添加的任何文本，都应该在CSS代码中进行哪些更改，这些更改不应重叠。

我用来创建地图的HTML代码是：

<div id="outer">

    <p id="distance_text"></p>

    <input type="text" name="location" value="Current Location">

    <br>

    <div id="map_div"></div>

</div>

Answer 1

问题是由于CSS告诉文本距离元素#outer的顶部50px。

在CSS选择器#outer中更改以下行：

#outer {
    width: 400px;
    /* height: 50px; */
    margin: 0 auto;
    text-align: center;
}