如何移除Python Web应用中folium地图的底部内边距？

我之前也碰到过这个问题，Folium生成的HTML默认会通过一个带padding-bottom的容器来维持地图的宽高比，这正是你看到底部多余内边距的原因。这里有几个实用的解决办法：

方法1：直接修改生成的HTML字符串 #

既然map._repr_html_()返回的是纯文本HTML，我们可以直接替换掉那个造成底部间距的样式：

html_map = map._repr_html_()
# 将默认的padding-bottom替换为0，彻底移除底部内边距
html_map = html_map.replace('padding-bottom:60%;', 'padding-bottom:0%;')

这种方法直接从源头修改生成的HTML，效果立竿见影，不需要调整前端模板。

方法2：在模板中用CSS覆盖样式 #

如果你不想改动Python代码，可以在渲染地图的模板里添加自定义CSS来覆盖默认样式。比如：

/* 针对Folium生成的外层容器，强制移除底部padding */
div[style*="position:relative;width:100%;height:0;padding-bottom:60%;"] {
    padding-bottom: 0 !important;
}

如果你的地图有专属的父容器（比如给它套了一个class为map-wrapper的div），也可以用更精准的选择器：

.map-wrapper div[style*="padding-bottom"] {
    padding-bottom: 0 !important;
}

方法3：调整Folium地图的高度参数 #

你当前设置的height="45%"是相对父容器的高度，Folium会根据这个比例自动计算padding-bottom的值。如果把高度改成固定像素值，比如：

map = folium.Map([0.376568,32.663343], width="100%", height="400px", zoom_start=13)

这样生成的容器padding-bottom会适配固定高度，可能会减少甚至消除多余的底部内边距，同时也能让地图高度更可控。

内容的提问来源于stack exchange，提问作者Judge Kriegler