调整font-size时元素自动生成margin/padding引发布局偏移如何解决

调大字号后出现偏移、内容被挤压，核心是三个原因：

• 浏览器对h1、p、h2这类文本标签自带默认margin，且默认margin用em单位，会随当前元素字号同比放大，字号越大边距越大，直接挤压下方内容
• 你给.main-fcs设置的transform: translate(-10%, -30%)中，百分比是相对于元素自身宽高计算的，字号变大后容器被内容撑宽，translateX的偏移距离同步变化，直接导致整个文本块水平移位
• 浏览器默认行高为normal，会根据字号自动计算上下留白，不同字号下留白高度不一致，加重垂直方向的错位

按顺序修改即可：

• 全局重置所有元素的默认内外边距，统一盒模型，从根源消除浏览器默认样式的干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 修正定位逻辑：删除.main-fcs上的transform: translate(-10%, -30%)属性，这个属性的百分比偏移依赖元素自身尺寸，只要内容尺寸变化就会移位。如果需要调整位置，直接修改top、left的数值即可，需要偏移的话用固定像素值写transform，不要用百分比。
• 统一文本行高：给.main-fcs设置无单位的行高值（比如line-height: 1.2，数值可根据视觉效果调整），固定不同字号下的文本垂直留白比例，避免垂直方向错位。
• 如果还有极细微的横向对齐偏差，是字体文件本身自带的字形左右留白导致的，可通过给对应文本加极小的负text-indent（比如text-indent: -0.5px）微调，一般清完默认边距后不会有明显偏差，不需要额外处理。

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: Roboto-Black;
    src: url(/fonts/Roboto-Black.ttf);
}
:root {
    --black: Roboto-Black 
}

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* INDEX PAGE */
body,html {
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.index-bg {
    background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    z-index: 1;
}

.main-fcs {
    position: absolute;
    top: 30%;
    left: 10%;
    font-size: 30px;
    line-height: 1.2; /* 统一行高 */
}

.main-fcs h1 {
    font-family: var(--black);
    /* 在此处设置h1的font-size即可，不会出现偏移、挤动问题 */
}

/* 按钮区域清除h2默认边距 */
.fcs-btn-bck h2 {
    margin: 0;
}

原html标签上的内联样式style="max-width: 100%; overflow-x: hidden;"已经移到全局CSS规则中，不需要额外保留。

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