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

2022/2/8 23:50:16

本文主要是介绍自己制作的网站最边缘出现空白边框是怎么回事?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

刚刚开始学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)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属性可以有一到四个值。

  • margin:25px 50px 75px 100px;
    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px

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

新手上路,请多指教。详情请看CSS margin(外边距) | 菜鸟教程 (runoob.com)



这篇关于自己制作的网站最边缘出现空白边框是怎么回事?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程