CSS如何设置边框和边框之间的距离？

html-css083

CSS如何设置边框和边框之间的距离？,第1张

嗯，只可以用背景图裁1个可以循环的gif点图，间距自己调，之后在div、table、td你想要加边框的标签上加样式如下：

background:url(../images/topdotted.gif) top repeat-x

background:url(../images/topdotted.gif) bottom repeat-x

background:url(../images/sidedotted.gif) left repeat-y

background:url(../images/sidedotted.gif) right repeat-y

在CSS中，line-height被用来控制行与行之间垂直距离。也可以使用letter-spacing:*px来控制文字间距，*px是指间距像素。

不过，行间距与半行间距，还是取决于CSS中的line-height。

默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。可以定义line-height属性来覆盖初始值：p｛line-height:140%｝。

那5种line-height写法，可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开，如：<font-size>/<line-height>。

实例：body{font:100%/normal  arial} , body{font:100%/120%  arial} ,body{font:100%/1.2  arial}  ,body{font:100%/25px  arial}

原因是display:inline-block属性产生的间隙。

display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。

方案一：给元素设置float:left,缺点高度塌陷，要清除浮动。（推荐）

li{display:inline-blockpadding:5pxbackground-color:#ff6float:left}

.clr:after{clear:bothdisplay:blockoverflow:hiddenheight:0content:"."}

.clr{zoom:1}

<ul class="clr">

<li><a href="">HTML</a></li>

<li><a href="">CSS</a></li>

<li><a href="">Javascript</a></li>

<li><a href="">XML</a></li>

</ul>

方案二：设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，如果font-szie：16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。

方案三：设置父元素 display:tableword-spacing:-1em目前这个方法可以完美解决，且兼容其他浏览器。