0
点赞
收藏
分享

微信扫一扫

CSS第三章:3.详解盒子模型 box-module(内容区边框、内间距padding、外间距margin)

诗远 2022-04-28 阅读 115

一、内容区、边框

1.请移步此文档:box-module 内容区及边框详解

二、盒装型 · padding 内间距

1.内边距简介:

· 内容区和边框之间的距离是内间距

· 一共有4个方向的内间距:
padding-top
padding-right
padding-bottom
padding-left

· 内容区中的颜色会延伸到内边距上

2.HTML代码:
在这里插入图片描述
3.CSS代码:
在这里插入图片描述
4.显示效果:
在这里插入图片描述
5.文档中,padding方法的其他参数的使用方法:
在这里插入图片描述

三、盒装型 · margin 外边距

1.外边距一共有4个方向:
· margin-top
· margin-right
· margin-bottom
· margin-left

1.1 margin 的取值范围及效果:
margin 取值可以为正数,也可以是负数。正数不会有任何问题,如果取负数,且元素旁边有其他元素或是边框,可能会发生移出浏览器窗口 或 覆盖的情况。

1.2 margin 的简写属性 写法:
见如下CSS代码。

2.HTML代码:
在这里插入图片描述
3.CSS代码:
在这里插入图片描述
4.显示效果:
在这里插入图片描述

举报

相关推荐

0 条评论