CSS 基础3（内边距、外边距、边距模型）

CSS 内边距，以及当设置的数值小于4个的时候的处理

元素内边距
指的是元素里的内容与边框之间的距离
属性：
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上右下左

1左内边距
属性:padding-left
值：数字
指的是，元素中的内容，与边框之间的距离
```
<style>
.red{border:5px solid red;background-color:green;
}.pad-left{border:5px solid red;background-color:green;padding-left:50px;
}</style><span class="red"> 无内边距的span  </span><br/> <br/><span class="pad-left"> 左边距为50的span  </span><br/>
```
2.内边距，写1个和写4个的区别
属性：padding
值：如果只写一个，即四个方向的值
值：如果写四个，即四个方向的值
上右下左,依顺时针的方向依次赋值
```
<style>
.pad-left-one{border:5px solid red;background-color:green;padding: 20;
}.pad-left-four{border:5px solid red;background-color:green;padding: 10 20 30 40;
}</style>
<br/>
<span class="pad-left-one"> padding:20的span  </span> <br/> <br/> <br/> <br/><span class="pad-left-four">
padding: 10 20 30 40 的span </span> <br/> <br/> <br/> <br/>
```
3.当内边距的值少于4个的时候
如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内边距的值。
举例说明
这是完整4个的
padding: 10 20 40 80
如果只有3个
padding: 10 20 40
那么left取right
padding: 10 20 40 = padding: 10 20 40 20
如果只有两个
padding: 10 20
那么bottom取top，left取right
pading: 10 20 = padding:10 20 10 20
如果只有一个
padding:10
那么right取top，bottom取top，left取top
padding:10 = padding:10 10 10 10
CSS 外边距样式
元素外边距
指的是元素边框和元素边框之间的距离
属性：
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距

指的是元素边框和元素边框之间的距离

注：像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。为了观察上下外边距的效果，可以采用块级元素，比如div.
```
<style>
.red{border:1px solid red;background-color:green;
}.margin{border:1px solid red;background-color:green;margin-left:10px;
}</style><span class="red"> 无外边距的span  </span>
<span class="red"> 无外边距的span  </span><br/><span class="red"> 无外边距的span  </span>
<span class="margin"> 有左外边距的span  </span>
```
CSS的边框模型
真正决定一个元素的表现形式，是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离，即为内边距 5px
灰色框，是指边框与其他元素之间的距离，即为外边距：10px
```
.box{width:70px;padding:5px;margin: 10px;
}
```
```
<style>
.box{width:70px;padding:5px;margin: 10px;
}div{border:1px solid gray;font-size:70%;
}
</style><div>其他元素
</div><div class="box">内容宽度70px <br><br>内边框：5px <br> <br>外边距：10px <br>
</div><div>其他元素
</div>
```

CSS 基础3（内边距、外边距、边距模型）相关推荐

CSS基础（9）- 行盒的盒模型
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录行盒的盒模型显著特点行块盒空白折叠可替换元素和非可替换元素参考资料行盒的盒 ...
css border边框不占外边的边距
box-sizing: border-box;
CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...
css内边距外边距和边框
关于css内边距外边距和边框的一些介绍 1.margin 外边距是指相邻同辈元素之间的距离. 相邻元素块的margin叠加显示如上图所示两个元素块的margin值都设置为50px. 2.paddi ...
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...
div默认外边距是多少_CSS盒模型之内边距、边框、外边距十九问（持续更新）...
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法第五问:描述一下下面盒子的大小,颜色什么的(content ...
html5 css3 内边距,css什么是内边距？css内边距的设置方法（实例）
在前端开发中经常会使用css盒子模型,一般我们会通过css设置width(宽度),padding(内边距),margin(外边距)等属性可以调节整个盒子的大小.本章就给大家介绍css盒子模型的内边距( ...
CSS边框设置以及内外边距的使用
1.边框该border属性为以下属性的简写属性.例如:border:1px solid black; border-width表示边框的粗细,可以是medium,thick等,一般使用数字加单位组合 ...
android 外边距,外边距（padding）重叠的及解决办法
两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒 ...
前端之CSS篇(三)——CSS三大特性及盒子模式和边距边框
1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性.继承性.优先性 1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突的问题. ...

CSS 基础3（内边距、外边距、边距模型）

CSS 基础3（内边距、外边距、边距模型）相关推荐

最新文章

热门文章