使用ipywidgets布局组件间距过大，如何让FloatText紧邻Checkbox？

问题原因 #

ipywidgets的各类组件（比如Label、Checkbox、FloatText）默认自带**内边距（padding）和外边距（margin）**样式，同时HBox容器的默认布局也会在子组件之间预留固定间距，这些默认样式叠加起来就导致组件看起来间距过大，达不到紧密排列的效果。

解决方法 #

要让FloatText紧邻Checkbox，你可以通过以下几种方式调整：

1. 调整单个组件的布局属性 #

给每个组件设置layout参数，把外边距和内边距设为更小的值，按需保留少量间距避免完全挤在一起：

import ipywidgets as widgets

label = widgets.Label(value='test:', layout={'margin': '0 5px 0 0', 'padding': '0'})
checkbox = widgets.Checkbox(indent=False, layout={'margin': '0 3px 0 0', 'padding': '0'})
float_text = widgets.FloatText(layout={'margin': '0', 'padding': '0'})

widgets_box = widgets.HBox([label, checkbox, float_text])
display(widgets_box)

2. 修改HBox的spacing参数 #

直接通过HBox的spacing参数控制子组件间距，再微调单个组件的边距：

import ipywidgets as widgets

label = widgets.Label(value='test:')
checkbox = widgets.Checkbox(indent=False)
float_text = widgets.FloatText()

# 把HBox的子组件间距设为0
widgets_box = widgets.HBox([label, checkbox, float_text], spacing='0px')
# 微调FloatText的左边距让它更贴近Checkbox
float_text.layout.margin = '0 0 0 -1px'
display(widgets_box)

3. 自定义CSS样式（全局/批量调整） #

如果需要统一修改同类型组件的样式，可以注入自定义CSS：

import ipywidgets as widgets
from IPython.display import display, HTML

# 注入CSS覆盖默认样式
display(HTML("""
<style>
    .widget-label { margin-right: 5px; padding: 0; }
    .widget-checkbox { margin-right: 2px; padding: 0; }
    .widget-floattext { margin-left: 0; padding: 0; }
    .widget-hbox { gap: 0px; }
</style>
"""))

label = widgets.Label(value='test:')
checkbox = widgets.Checkbox(indent=False)
float_text = widgets.FloatText()

widgets_box = widgets.HBox([label, checkbox, float_text])
display(widgets_box)

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