如何为django-ckeditor中左右浮动的图片设置智能边距？

完全可以通过CSS实现你要的效果，针对django-ckeditor生成的带float样式的figure.image元素，直接用属性选择器匹配对应的内联样式，再设置边距即可：

/* 先清除figure默认的margin和padding，确保外侧完全对齐 */
figure.image {
  margin: 0;
  padding: 0;
}

/* 匹配右浮动的figure元素：右margin为0，左margin留1em间距 */
figure.image[style*="float:right"],
figure.image[style*="float: right"] {
  margin-right: 0;
  margin-left: 1em;
}

/* 匹配左浮动的figure元素：左margin为0，右margin留1em间距 */
figure.image[style*="float:left"],
figure.image[style*="float: left"] {
  margin-left: 0;
  margin-right: 1em;
}

说明： #

• 用[style*="xxx"]属性选择器可以精准匹配带有指定内联样式的元素，兼容ckeditor生成的两种写法（带空格float: right或不带空格float:right）；
• 先重置figure.image的默认margin和padding为0，保证元素外侧和文本块边缘完全对齐；
• 针对不同浮动方向设置反向的内边距，让图片和相邻文本之间保留合适的间距，同时外侧无多余留白。

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