自己制作的网站最边缘出现空白边框是怎么回事？

2023-10-19 11:56:58

刚刚开始学HTML的小伙伴们一般都会去模仿一些网站的模样，但是辛辛苦苦弄了半天之后发现一个令人崩溃的事情，那就是自己的网站莫名其妙的有一个空白边框，很不雅观。

就像这样，

右键网页进入检查可以找到

将鼠标放在橙色的部分可以看到页面中高亮的地方就是那个边框。

原来对于<bady>，默认是有一个8单位的空白边框的。就像这样

可以看到，在<bady>中有一个margin，长度为8。margin的意思就是外边距，我们只需要把他给设置为零就可以解决这个问题啦

将外边框设置为0

我们只需要在<head>中加入这几行代码就可以啦。

<style type="text/css">
body{
		margin: 0; 
		padding: 0;
		border: 0;
	}
</style>

其中margin的意思是外边距，padding的意思是内边距，border的意思是边框，将他们设置在<bady>中就可以修改<bady>的默认属性啦

完成之后就是这样啦

margin、padding、border都是盒子模型的东西

下面我们来了解一下他们的属性

设置所有的边框属性。

1）可同时设置边框的宽度、样式、颜色

2）使用border-width、border-style、border-color单独设置

3）

4）border-collapse，合并

设置是否将表格框折叠为单一边框

separate（默认，单元格边框独立）、collapse（单元格边框合并）

（2）padding内边距

设置元素所有内边距的宽度，或者设置各边边距的宽度。

直接使用padding就是设置所有各边的边距，

单独设置各边的内边距：padding-top、right、botton、left（默认，上右下左），中间用杠（减号）-连接

使用padding的时候要注意，内边距的改变可能会使元素变形若不想影响格式效果，可以用margin属性设置元素外边距。

（3）margin外边距

使用方法呢，和上面都一样，他也可以像padding一样设置全局，也可以设置某个边

margin属性可以有一到四个值。

默认的方向是上右下左，不需要的地方可以直接设置为0，如果只给margin三个值，那么你的下边距就是0，以此类推。