多语言展示
当前在线:351今日阅读:113今日分享:31

如何去除UL的默认边距

对于新手或者刚毕业甚至参加工作一段时间的网页制作人员都会受到边距的影响,你好久搞不定的问题有可能就是边距搞的鬼,有不少同学与同事都问过我边距的问题,其中UL 的边距问题最多,这里我简单说一下。
工具/原料
1

Dreamweaver网页编辑软件

2

浏览器

方法/步骤
1

首先打开Dreamweaver,Dreamweaver是我们最早接触的网页编辑软件,很适合新手。

2

打开Dreamweaver后,新建一个文件,用来编辑演示的满面。

3

页面代码如下图所示,很简单的,新手都能一看即懂,在代码中我去掉了LI默认的list-style 圆点,这样就排除原点间距与默认边距叠加造成的混淆效果了。

4

然后我们保存好网页,用浏览器打开我们的网页,我们会发现我们的网页4个li并么有像我们想象的一字排列,而是形成了两列。div宽是320px,Li(算上两边的边框)宽是80像素,正好可以一字排开。

5

这是因为我们没有去除默认边距的原因,下面这张图我们加上了【margin:0;padding:0;】,然后我们查看一下效果。

6

加上【margin:0;padding0;】的效果如下图所示,我们发现它们一字排开,达到了预期的效果。

7

上面我们说到的ul的边距,其中页面也有边距问题,这是新手绝对会遇到与困惑的事情,我承认我曾经也困惑过,图中黑色箭头指的就是页面的边距。

8

页面的边距问题解决方法与UL一样,只要加上【body{ margin:0;padding:0;}】即可。

9

效果如下图所示,页面的边距消失啦。

注意事项
1

一定要注意【body{ margin:0;padding:0;}】前不用加点。

2

共同分享,共同进步。

推荐信息