如何减小页面指定区块宽度 解决代码与页角间距过大问题

根据你能控制页面的权限，选对应方法操作即可：

• 自有页面/可配置站点调整
  核心改两个样式参数就能解决：
  1. 调小主内容容器的max-width值：多数前端框架、默认站点主题会把主内容区最大宽度设为1400px以上，大屏下就会出现两侧留白过宽的问题，根据使用习惯改成1000px-1200px即可
  2. 压缩容器左右内、外边距：把主容器的左右padding、margin值降到12px-20px区间，同时给代码块单独设置左右内边距，不要留冗余空白
     参考CSS修改代码：

  /* 主内容容器 */
  .main-container {
    max-width: 1100px;
    padding: 0 16px;
    margin: 0 auto;
  }
  /* 代码块间距修正 */
  pre, .code-segment {
    padding: 16px 12px;
    margin: 12px 0;
  }
  

  如果是用现成建站系统、文档平台搭建的页面，直接在主题布局设置里找「内容区宽度」「页面边距」选项，可视化调整参数后保存即可，不需要手动改代码。
• 第三方站点本地浏览适配
  安装Stylus这类支持自定义网页样式的浏览器扩展，针对对应站点写入上述覆盖样式，保存刷新后就能生效，样式规则仅对目标站点生效，不会影响其他网页的正常显示。

注意不要把边距设为0，内容完全贴住视窗边缘反而会加重大屏浏览的视觉疲劳，留10px以上的基础边距使用体验更好。

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