div +css设置li高度出现间隙的问题

html-css018

div +css设置li高度出现间隙的问题,第1张

有很多标签都会有默认的margin或者padding，并且各个浏览器的默认值还不一样，最好在写网页前将默认的属性全去掉，用*通配符就行了。

例如：*{margin:0padding:0list-style:none......},

有的时候图片之间会出现间隙，给图片加上float:left就不会有了。还

可以使用 letter-spacing:*px来控制文字间距，*px是指间距像素

这个不仅可以用在li里，其它需要文字排版的地方都可以使用

举个例子：

.list li {width:200pxtext-align:centerheight:22pxline-height:22pxletter-spacing:5pxoverflow:hiddenclear:both}

说明.list li {li宽度200px 文字居中 li高度22px 行高22px 字间距5px 超出部份隐藏 清除}

要看这个li横向还是纵向，

横向的主要用padding-left和padding-right来控制，还可用li的宽度来控制；

纵向的就多点，除了有padding-top和padding-bottom来控制，还可以用li的高度以及li的行高来控制；

具体二种代码如下：

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

#a2 { font-family: Arialfont-size: 14pxcolor: #000000text-decoration: nonemargin: autoheight: 100pxwidth: 900pxpadding: 0pxlist-style-type: nonefloat: noneclear: bothborder: 1px solid #000099}

#a2 li { line-height: 30pxlist-style-type: nonefloat: leftheight: 30pxwidth: autopadding-top: 5pxpadding-right: 5pxpadding-bottom: 5pxpadding-left: 5pxbackground-color: #FFFFCCborder: 1px dashed #000066margin-top: automargin-right: automargin-bottom: automargin-left: autotext-align: center}

#a1 li { font-family: "微软雅黑"font-size: 14pxline-height: 30pxcolor: #333333text-decoration: nonefloat: nonewidth: autoheight: 35pxpadding: 6px}

#a1 { border: thin solid #990000}

-->

</style>

</head>

<body>

<div id="a2">

<ul>

<li>新闻标题1</li>

<li>新闻标题2</li>

<li>新闻标题3</li>

<li>新闻标题4</li>

<li>新闻标题5</li>

</ul>

</div>

<p></p>

<div id="a1">

<ul>

<li>这是新闻标题1</li>

<li>这是新闻标题2</li>

<li>这是新闻标题3</li>

<li>这是新闻标题4</li>

<li>这是新闻标题5</li>

</ul>

</div>

</body>

</html>