Markdown预览器页面侧边/底部出现异常白色边框求助

排查方向与修复方案 #

• 配置正确的viewport元标签：在页面头部添加适配移动端的viewport设置，强制页面宽度匹配设备屏幕，避免浏览器自动缩放产生留白：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 修正盒模型计算逻辑：给目标元素添加box-sizing: border-box;，确保width属性包含内边距和边框，防止元素实际宽度超出视口：

  @media screen and (max-width: 767px){
    #editor-div{
      width: 80vw;
      box-sizing: border-box;
    }
    #preview-div{
      width: 80vw;
      box-sizing: border-box;
    }
  }
  

• 截断页面横向溢出：给body或最外层容器添加溢出控制，直接隐藏超出视口的内容：

  body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
  

• 检查元素内外边距：确认#editor-div和#preview-div没有额外的左右margin或padding导致宽度溢出，如需保留内边距，结合box-sizing调整：

  @media screen and (max-width: 767px){
    #editor-div{
      width: 80vw;
      box-sizing: border-box;
      margin: 0 auto;
      padding: 0 1rem;
    }
    #preview-div{
      width: 80vw;
      box-sizing: border-box;
      margin: 0 auto;
      padding: 0 1rem;
    }
  }
  

问题根源 #

异常白边本质是元素实际渲染宽度超出了视口宽度，可能由viewport设置错误、盒模型未正确计算，或是元素额外的margin/padding导致宽度叠加。通过上述调整，可在保留原有媒体查询样式的前提下解决问题。

内容的提问来源于stack exchange，提问作者Henriks Matiass Nilsens