ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-02-08 23:01:59  阅读:234  来源: 互联网

标签:怎么回事 margin 边框 padding 空白 内边 设置 border


刚刚开始学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)

标签:怎么回事,margin,边框,padding,空白,内边,设置,border
来源: https://blog.csdn.net/m0_65325755/article/details/122832444

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有