java中内边距跟外边距,padding和margin——内边距和外边距
一、padding——内边距(内填充)
1.1、padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
div.outer{
width: 400px;
height: 400px;
border: 2px solid #000;
}
div.inner{
width: 200px;
height: 200px;
background-color:red ;
padding: 50px;
}
运行效果图:
1.2、padding 属性也可以按照方向分开来写。
.outer {
width:400px;
height:400px;
border: 2px solid #000;
}
.inner {
width:200px;
height:200px;
background-color:green;
/*padding:40px 80px;运行效果是一样的*/
padding-top:40px;
padding-right: 80px;
padding-bottom: 40px;
padding-left: 80px;
}
运行效果图:
1.3、padding属性值可以有四种形式:
二、margin——外边距
2.1、margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
div.outer{
width: 400px;
height: 400px;
border: 2px solid #000;
}
div.inner{
width: 200px;
height: 200px;
background-color:green ;
margin: 50px;
}
代码运行效果如下图:
2.2、margin属性也可以按照方向分开来写。
div.outer{
width: 400px;
height: 400px;
border: 2px solid #000;
}
div.inner{
width: 200px;
height: 200px;
background-color:green ;
/*margin:40px 80px 20px 40px;运行效果是一样的*/
margin-top:40px;
margin-right: 80px;
margin-bottom: 20px;
margin-left: 80px;
}
代码运行效果如下图:
2.3、margin属性值可以有四种形式:
三、内边距和外边距的区别
1、margin和padding都是盒模型(Box Model)的重要元素,二者都是用来处理与其他盒子的距离关系进行布局的。
2、形象的介绍,夏季女生在地铁遇到色狼变态时有发生,如果选择穿上羽绒服与色狼保持距离,那就是padding内边距,如果选择移动自己的位置远离色狼,那就是margin外边距。
3、就与borde边框的位置来看,pading在border边框内,margin在border边框外。
4、padding内边距会改变盒模型的大小(即宽高),margin则不会。
5、margin内边距用负值,pading不可以。
.box{float:left;border:10px solid #000;margin:20px;}
.box div{width:100px;height:100px;background:red;}
.div1{margin-top:-30px;}
.div2{margin-left:-30px;}
.div3{margin-bottom:-30px;}
.div4{margin-right:-30px;}
代码运行效果图如下:
6、背景图片会显示在padding内边距上,不会显示在margin外边距上。
.box{
width:320px;
border: 10px solid #000000;
}
div{
width: 200px;
height: 200px;
margin: 40px;
padding: 20px;
border: 1px solid red;
background: url(img/2mail.jpg) no-repeat;
}
代码运行效果图如下:
四、兼容
4.1、IE浏览器不支持padding内边距和margin外边距的“inherit”继承属性值。
4.2、外边距合并
4.2.1、当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并为最大的数值,请看下图:
解决方法:把全部的外边距给上面元素的下外边距或者下面元素的上外边距。
外边距合并的意义:
4.2.2、当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:
解决方法:1、给父集加overflow: hidden;2、border或者padding;3、不使用margin,用padding拉开距离。
CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
(转)css内边距与外边距的区别,精辟啊
css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...
margin属性以及垂直外边距重叠问题
盒子的margin属性 盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...
CSS -- 盒子模型之边框、内边距、外边距
一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...
区分内边距与外边距padding和margin
以两个并排显示的div为例说明. 现在两个div都有背景颜色, 右边的div中有几行p, 若是想要使两个div之间有间隔, 即两块带了颜色区域之间产生空隙, 则给div的css中外边距margin赋值 ...
css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
CSS.03 -- 浏览器行高、字体;盒子模型--边框、内边距、外边距
如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件 ctrl+n 打开文件 ctrl+o 调出和隐藏标尺 ctrl+r ...
“margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
css常用属性:居中展示、内边距、外边距
1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...
随机推荐
Spark机器学习读书笔记-CH04
[root@demo1 ch04]# spark-shell --master yarn --jars /root/studio/jblas-1.2.3.jar scala> val rawDa ...
【Java学习笔记】Map接口的子接口---TreeMap
TreeMap,与TreeSet类似,可以对集合中的元素进行排序,同时保持元素的唯一性. 应注意,Comparable(实现接口,记得覆盖comparaTo方法),Comparator的使用. imp ...
【项目】Http请求在NSMutableURLRequest添加HttpBody的字典params属性
在请求头中加入字典集合的Body,首先把字典转换成json,然后json转换成NSData,然后加入到HTTPBody中,我有已下写法 // 参数paramsNSDictionary * params ...
Java Session 介绍;
为什么需要Session 这是为了填补 Http 协议的局限,当用户去访问一个页面,服务端返回完了请求(如,你访问完一个网页,这个页面将页面内容,界面UI呈现给你),就算是结束了,就断开了,服务端不再 ...
jenkens构建脚本
Build Root POM Goals and options Command # consts SERVER="192.168.60.209" DEPLOY=" ...
小程序tab切换 点击左右滑动
wxml
gunicorn启动flask项目的坑
问题描述:项目用的是flask框架,在项目上线的时候,服务器上是使用gunicorn来启动项目的.但是上线之后,发现服务成功启动了,也有正确的返回值,但是没有生成日志,而用python来启动服务的时候 ...
Cas 服务器 为Service定义UI
Cas服务器允许用户为每个Service自定义登陆等UI外观,但需要尊着Cas定于的规则: 一.为Service配置theme(主题) 在
JavaScript模拟自由落体
1.效果图 2.实现分析 利用Canvas画圆球.地面: 1.下落过程 物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能 重力势能 Ep = mgh 动能 Ek = (1/2)mv^2 速 ...
SPOJ NSUBSTR Substrings
题意 dt { font-weight: bold; margin-top: 20px; padding-left: 35px; } dd { box-shadow: 3px 3px 6px #888 ...
java中内边距跟外边距,padding和margin——内边距和外边距相关推荐
- CSS 中 的 margin、border、padding 区别 (内边距、外边距)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一 ...
- html内边距居中,HTML中详述外边距样式属性(margin)与内边距样式属性(padding)...
外边距样式属性(margin) 外边距样式属性(margin):设置边框外的距离. 属性:margin-top样式属性,margin-bottom样式属性,margin-left样式属性和margin ...
- div默认外边距是多少_CSS盒模型之内边距、边框、外边距 十九问(持续更新)...
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法 第五问:描述一下下面盒子的大小,颜色什么的(content ...
- HTML文字左侧留白,DIV CSS padding内补白(内边距)left right top bottom
DIV CSS padding内补白(内边距)left right top bottom语法应用案例教程 Padding是比较常用CSS样式,可以利用padding内边距设置上.下.左.右对象内容与四 ...
- html给页面整体添加左右边距_DIV CSS padding内补白(内边距)left right top bottom案例教程...
DIV CSS padding内补白(内边距)left right top bottom语法应用案例教程 Padding是比较常用CSS样式,可以利用padding内边距设置上.下.左.右对象内容与四 ...
- Java中调整字距与行距的方法 其一(以DrawString为例)
今天要谈的是如何在Java中调整字距与行距,当然,这里谈的主要是针对swing与awt里的字距与行距. 调整字距与行距看起来似乎是个很简单的问题,大概可以直接调用某个内置的方法来操作,紫雾我最开始也是 ...
- css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
- CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧 ...
- java中浏览器电脑的分辨率_关于移动端适配,你必须要知道的
原标题:关于移动端适配,你必须要知道的 来自公众号:code秘密花园 导读 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方 ...
最新文章
- 【React 实战教程】从0到1 构建 github star管理工具
- 鼠标平滑滤波_38年依然保持旺盛创作力,罗技G Hero16K撑起无线游戏鼠标时代
- 基于AFNetworking的多张图片上传
- 抢先体验微软最新客户端系统Windows 8.1!
- dell驱动安装工具_技术丨如何快速安装显卡驱动
- CommandBehavior.CloseConnection的使用
- Android studio无法连接识别检测各种模拟器和手机的问题 (万能方案)。
- 高级程序员如何面对职场压力?(2)--受伤的总是我
- 系统防止绕过程序直接数据库修改数据(金额等敏感数据)
- python常规异常的基类_Python警告的基类警告类是____。
- 软考高级网络规划设计师5天修炼
- 基于JAVA+SpringBoot+Mybatis+MYSQL的科研项目评审系统
- 在Eclipse中打jar包
- 控件时出现“未能实例化控件******,VS2008 中无法使用ACTIVEX控件的解决
- Linux 常用命令十四 killall和pkill
- Fiori 实现在网页端调用摄像头扫描二维码进行识别
- hbuilderAnd海马玩模拟器的连接
- linux下delete释放不了内存,c++delete后虚拟内存不降的原因(疑似内存泄漏)
- jzoj 4638. 第三条跑道
- P2973 [USACO10HOL]赶小猪
热门文章
- java项目构建ant_Ant - 项目构建 - 开发工具 - JAVA开源项目 - 开源吧
- java 输入法实现(一)
- 【PyTorch深度学习项目实战100例目录】项目详解 + 数据集 + 完整源码
- 我的读书笔记 -《狼道智慧》
- uniapp设置tabBar后,页面底部有留白。
- 图形学(7)反走样技术
- 【学习分享】pytorch图像分类实战(1创建数据集)
- 详解 Benders 分解与一个算例的 python 代码
- Spring之IOC自动装配
- 回归预测 | MATLAB实现PCR(主成分回归)多输入单输出