html5字体左间距-九八云安全

HTML5字体左间距问题解析

原因类型	说明	示例表现
默认样式	浏览器对`<p>`、`<h1>-<h6>`等标签预设了基础外边距	段落首行左侧出现空白
父级样式继承	父元素设置的`margin`/`padding`会传递给子元素	嵌套元素累积左侧间距
CSS重置影响	使用normalize.css等重置方案会修改默认间距	预期间距与实际效果不符
浮动/定位干扰	浮动或绝对定位元素可能破坏文档流	相邻元素左侧出现异常空隙
字体特性差异	中文字体与西文字体间距渲染机制不同	中英文混排时左侧对齐偏移

精准控制文本缩进

p {
text-indent: 2em; / 首行缩进2个字符宽度 /
}

消除元素左侧间隙

/ 清除所有块级元素的默认外边距 /
 {
    margin: 0;
    padding: 0;
}

处理浮动元素间距

.float-box {
    float: left;
    margin-left: -10px; / 抵消父元素产生的左侧间隙 /
}

特殊场景处理技巧

/ 解决中英文混排对齐问题 /
.mixed-text {
letter-spacing: -0.05em; / 微调字符间距 /
}

属性	Chrome	Firefox	Safari	IE11
`text-indent`支持
负`margin`渲染	正常显示	正常显示	正常显示	需要`hasLayout`
`letter-spacing`精度	01px	01px	01px	1px

Q1：如何彻底清除页面所有元素的左侧间距？
A：在CSS重置文件中添加：

html, body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, dl, li {
    margin: 0;
    padding: 0;
}

注意需覆盖所有可能产生间距的元素。

Q2：为什么设置了margin-left:0仍有左侧空隙？
A：可能原因：

html5字体左间距