空格与边距

首页 > HTML实例讲解 > 空格与边距

在文字间插入空格

就算在文字间插入复数的半角空格,浏览器也只会显示一个空格。要在文字间插入适度的空格的话,可以像下面这样在有 □ 的地方插入全角空格。

aaa□□□□aaa

也可是使用特殊符号   来代替全角空格。

aaa    aaa

使用 <pre> 标签的话,半角空格也能直接输出到网页上。

<pre>
aaa        aaa
</pre>

去除网页四个角上的页边空白

比如把图像贴边显示在网页左上等,想去除网页四个角上的空白,可以在 <body> 标签里使用下面的属性。

<body marginheight=0 marginwidth=0 topmargin=0 leftmargin=0>

左右缩进

想让文本的左右缩进,可以先使用 CSS 在 <head>~</head> 里面定义下面的类。

<style type="text/css">
<!--
.i { margin-left: 3em; margin-right: 3em; }
-->
</style>

然后把想要缩进的文本用 <div class=i> 括起来。

<div class=i>
写在这里的文本,会在左右各缩进3个文字的距离。
</div>

行间距

设定行间距可以使用 CSS 里的 line-height。在 <head>~</head> 里像下面这样写。

<style type="text/css">
<!--
body, th, td { line-height: 150%; }
-->
</style>

padding与margin的区别

padding是内边距,指的是元素到边框的距离。而margin是外边距,指的是边框到周围元素的距离。

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
<div style="border:1px solid gray; margin:20px; padding:5px;">A</div>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
A
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA