如何为Monaco Editor代码区域（lines content）添加内边距？

我之前也踩过这个坑！直接硬改Monaco的内部CSS确实会搞乱光标定位和排版逻辑——毕竟Monaco的布局是靠内部精确计算撑起来的，手动改样式会让它的计算和实际显示脱节。这里有两种靠谱的解决方案，不会破坏编辑器的正常功能：

方法1：使用官方支持的padding配置（推荐） #

如果你使用的是Monaco Editor 0.25.0及以上版本，官方已经提供了padding配置项，可以直接在初始化编辑器时设置内容区域的内边距，完全不用担心光标错位问题：

const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: 'console.log("Hello Monaco!");',
  language: 'javascript',
  // 设置上下左右的内边距，单位是像素
  padding: {
    top: 16,
    bottom: 16,
    left: 16,
    right: 16
  }
});

这个配置是Monaco原生支持的，编辑器会自动调整内部布局、光标位置和滚动逻辑来适配这些内边距，完全不会有异常行为。

方法2：自定义容器样式+Viewport偏移（适配旧版本） #

如果你的Monaco版本比较旧，没有padding配置项，可以通过给编辑器的外层容器加内边距，再调整编辑器的视口偏移来实现效果：

1. 先给外层容器设置内边距：

#editor-container {
  padding: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 400px;
}

2. 然后在编辑器初始化后，监听布局变化并调整视口位置：

const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: 'console.log("Hello Monaco!");',
  language: 'javascript'
});

// 监听编辑器布局变化，确保窗口大小改变时样式依然生效
editor.onDidLayoutChange(() => {
  const viewportElement = editor.getDomNode().querySelector('.monaco-editor .overflow-guard');
  if (viewportElement) {
    // 偏移视口位置，匹配容器的内边距
    viewportElement.style.transform = 'translate(16px, 16px)';
  }
  // 调整滚动区域的边距，避免出现多余的滚动条
  const scrollElement = editor.getDomNode().querySelector('.monaco-scrollable-element');
  if (scrollElement) {
    scrollElement.style.margin = '0 -16px -16px 0';
  }
});

这种方法需要注意监听布局变化，因为编辑器窗口大小改变时，需要重新应用这些样式，防止出现错位。

为什么直接修改内部CSS会出问题？ #

Monaco Editor的光标位置、行宽、滚动区域都是根据初始化配置和实时窗口大小动态计算的。如果你直接修改.lines-content、.editor-scrollable这类内部样式类，会让实际显示的区域和Monaco内部计算的布局参数不匹配，最终导致光标错位、选中区域偏移、滚动异常等奇怪问题。

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