~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
常见的问题：
1.margin-top失效
解决方法：
1、设置父元素或者自身的display:inline-block;
2、设置父元素的border:1px solid red; 如果不想要border显示的话，可以设置border:1px solid transprent;这样边框就是隐藏起来。
3、设置父元素的padding:1px;
4、给父元素设置overflow:hidden;
5、给父元素或者自身设置position:absolute;
6、设置父元素非空，填充一定的内容。
2.ul li 清除缩进和项目符
解决方法：
1、清除项目符和缩进：ul {list-style: none; padding-left:0px;}
2、清除缩进 ul {margin:7;list-style-type:disc;}
3、清除缩进 ul {margin-left:20px}
4、清除缩进 ul {margin-left: -24px;}
二、更换项目符漂亮小图标
下面有3种实现方法：
1、简单方法
ul{list-style-image:url(/images/icon.gif);}
这种方法不同的浏览器的显示效果会有一些差异，主要是在图片的垂直位置上。有些浏览器会使图片和列表项文本的中部位置平齐，有的又会显示得高一些，总之就是有些不一致。
2、复杂方法
ul {list-style:none;}
li{background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
可以解决上面的浏览器不兼容的问题。首先，清除默认的项目符号，然后加上我们自己的背景图片。no-repeat告诉浏览器不要平铺这张图片，0px 50%告诉背景图片应该位于距左侧0px 且竖直方向位于顶部往下50%处，实际上就是在竖直方向居中。我们在左侧加上了17px的边距，这样那些15px宽5像素高的小图标就能完全显露出来，不会被文本遮挡，并且和文本之间有一点间隔。
3、常规方法
li {background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
原文：https://www.cnblogs.com/anna001/p/14858632.html