和等标签的offset/-webkit-margin-before属性 财富值26

2016-10-24 13:43发布

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?

友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
2条回答

谢邀
{margin:0;padding:0}是一个最简单的css reset方式。当然问题也是最多的。
其他我觉得比较常用的一个是淘宝的,一个是在git上的开源项目。你感兴趣可以自己去找找
这个链接是一个关于各种css reset的东西http://blog.bingo929.com/css-...

每个浏览器的默认样式都不一样。
p,li,h1-h6这些是默认有margin和padding,如果你不要可以设置{margin:0;padding:0}。
或者全部标签消除默认边框*{margin:0;padding:0}。
偏移量就是top,left这些属性,是定位position决定的。一般我们有需要才会去做微调。

一周热门 更多>