突然增加padding会使盒子变大，所以要按实际情况做调整。

没有写padding的时候：

<style>
div{
background:gray;
}
</style>
</head>
<body>
<div>
有一首诗最为动人，那就是青春；有一段人生最美丽，
那就是青春；有一道风景最为亮丽，那就是青春。
青春，不要说已疲惫，也许你的幻想曾被现实无情毁灭，
也许你的追求毫无结果，但你应该相信，没有寒风的洗礼，哪来万紫千红的春天，没有心的耕耘，哪有累累硕果？
</div>

加了padding后：

字没有紧贴在边缘。padding和border一样，可以给出一个像素确定四边的像素，也可以把四边的像素一一给出，或者只给出某一边的，padding-top：10px；

padding与背景色：

<style>
div{
width:100px;
height:100px;
background:gray;
border:30px solid blue;
padding:20px;
}
</style>
</head>
<body>
<div>
有一首诗最为动人，那就是青春；有一段人生最美丽
</div>
</body>

盒模型--padding的更多相关文章

  1. 盒模型padding和margin对滚动条位置的影响

    前置条件:盒模型样式overflow-y:scroll; ①padding-right:15px的效果: padding对于滚动条的位置显然是没有影响的,这也不是我们要的结果(这样很难看!) ②mar ...

  2. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  3. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  4. 标准盒模型与IE盒模型之间的转换

    首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...

  5. 前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  6. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

  7. 【CSS3】---盒模型margin、padding及border

    盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div ...

  8. 一天搞定CSS：盒模型content、padding、border、margin--06

    1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...

  9. border，padding，margin盒模型理解

    安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...

随机推荐

  1. Target：IG

    https://www.zhihu.com/question/25525630 别人轻轻松松红名,我拼死挣扎才1700+分. 仔细想想,虽然我在这东西上花了太多的精力,可是我根本没有认真学.做题全靠抄 ...

  2. BZOJ3468 : 滑雪

    根据公式$x^k=\sum_{i=1}^k Stirling2(k,i)i!C(x,i)$, 设$f[i][j][k]$表示从$(i,j)$出发的所有路径的$C(路径长度,k)$的和, 根据$C(n, ...

  3. Leap Motion发布新平台,直击下一代移动端VR/AR手部追踪

    2013年,动作捕捉技术公司Leap Motion发布了面向PC的体感控制器,不过销量并不乐观.随着2014年虚拟现实技术的再一次兴起,它发布一款用于Oculus Rift的附加设备,从而正式登上VR ...

  4. Word2Vec源码解析

    Reference:http://blog.csdn.net/itplus/article/details/37969519  (Word2Vec解析(部分有错)) 源码:http://pan.bai ...

  5. @font-face制作Web Icon

    @font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上 ...

  6. 一个不错的安卓下ssh客户端

    1.使用安卓作为ssh客户端连接ssh服务器 软件名:JuiceSSH 版本   :1.4.8 大小   :4.22 M 百度网盘地址:JuiceSSH_1.4.8.apk  或 JuiceSSH_1 ...

  7. Linux下rz命令使用的实例详解

    Linux中rz命令和sz命令都可用于文件传输,而rz命令主要用于文件的上传,下面将通过几个实例来给大家详细介绍下Linux下rz命令的用法,一起来学习下吧. rz命令可以批量上传文件,当然也可上传单 ...

  8. 【Go语言】面向对象扩展——接口

    简单地说 Interface是一组Method的组合,可以通过Interface来定义对象的一组行为.如果某个对象实现了某个接口的所有方法,就表示它实现了该借口,无需显式地在该类型上添加接口说明. I ...

  9. HTTP协议及其请求头分析

    HTTP协议及其请求头分析 HTTP协议及其请求头分析   众所周知,Internet的基本协议是TCP/IP协议,目前广泛采用的FTP.Archie Gopher等是建立在TCP/IP协议之上的应用 ...

  10. signal(SIGPIPE, SIG_IGN)

    文章来源:http://blog.163.com/niuxiangshan@126/blog/static/170596595201221942952676/   当服务器close一个连接时,若cl ...