css - <p>和<li>等标签的offset/-webkit-margin-before属性
本文介绍了css - <p>和<li>等标签的offset/-webkit-margin-before属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
1. 背景
在html中,我们看到<p>
和<li>
标签总是相对原始位置有一定的偏移。这种偏移类似word中的首行缩进和行间距。在edge浏览器盒模型中显示为offset
,在chrome浏览器中显示为-webkit-margin-before,-webkit-margin-after,-webkit-padding-start
等。
2.问题
我在写网页的过程中,遇到了<p>
和<li>
标签默认的不合适的偏移量。代码和截图如下。
3. 部分css和html
/*css*/
...
.nav_li{
float:left;
padding-right:36px;
list-style-type:none;
line-height:36px;
font-size:18px;
vertical-align:middle;
}
...
/*html*/
<ul>
<li class="nav_li">
<input id="nav_lab_home" name="nav_lab" type="radio" />
<label for="nav_lab_home">首页</label>
</li>
...
</ul>
...
4. 截图
显示效果
Edge中<li>
的盒子模型
Chrome中<li>
的盒子模型和属性
5.请问
(1)除了<p>和<li>,还有哪些标签拥有这样的特性?
(2)如果想要由自己决定这些标签的偏移量,应该如何设置css?
解决方案
每个浏览器的默认样式都不一样。
p,li,h1-h6这些是默认有margin和padding,如果你不要可以设置{margin:0;padding:0}。
或者全部标签消除默认边框*{margin:0;padding:0}。
偏移量就是top,left这些属性,是定位position决定的。一般我们有需要才会去做微调。
这篇关于css - <p>和<li>等标签的offset/-webkit-margin-before属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文