CSS——padding
2024-08-31 02:23:25
padding是盒子内容与边框的距离。
padding:10px;/*上下左右都是10px*/
padding:10px 20px;/*上下是10px 左右是20px*/
padding:10px 20px 30px 40px;/*依次是上下左右*/
注释:在盒子加上padding之后,例如padding:10px,会造成盒子宽高实际上都增加了10px。
嵌套中的盒子也就是子盒子,如果继承了父盒子的宽,那么不管子盒子如何增加padding-left、padding-right的值都不会撑大自己的宽,高是可以被撑大的。如果子盒子并没有继承父盒子的宽,而是自己设定了一个值,那么随着padding值的增大,它也会不断的增加。下面是继承了父盒子的宽:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.father {
width: 500px;
height: 300px;
background-color:#b6ff00;
}
.son {
height: 100px;
background-color: red;
padding-left:20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
效果:
结果:并没有撑大它的宽。
最新文章
- JavaScript OOP 之「创建对象」
- 【BZOJ 3642】Phi的反函数
- Angularjs学习笔记(五)----显示和格式化数据
- 啥时候js单元测试变的重要起来?
- Ruby准备工作
- asp.net中的<%%>形式的详细用法实例讲解
- javascript高级特性(面向对象)
- iOS开发-UI (一)常用控件
- 设计模式(二) 策略模式Strategy
- vmstat结果在不同操作系统上的解释
- tomcat部署项目启动采坑之UnknownHostException
- .NET Core的依赖注入[1]: 控制反转
- [Go] golang缓冲通道实现管理一组goroutine工作
- openjdk for window
- Git冲突和解决冲突-测试方法
- 【Linux】【Jenkins】系统配置报反向代理设置有误问题的解决方案
- Unity打包/读取AssetBundle资源全教程
- SDPA: Toward a Stateful Data Plane in Software-Defined Networking
- Web前端表单验证
- 使用express创建node服务器的两种方法及区别
热门文章
- codevs1226 倒水问题
- codevs1314 寻宝
- 通过代码学习python之@property,@staticmethod,@classmethod
- Ubuntu 16.04监控网络带宽软件
- Android 属性动画(Property Animation) 全然解析 (上)
- androidannotations的background和UiThread配合使用參考
- 编程算法 - 求1+2+...+n(函数继承) 代码(C++)
- 2015 Multi-University Training Contest 2 1004 Delicious Apples(DP)
- 云上kafka和自建kafka对比
- bookstrap form表单简单-smart-form