CSS的边距属性是用来设置页面中的一个元素所占空间的边缘到相邻元素之间的距离。

主要有两个属性:margin(外边距)和 padding(内边距)。

margin

在一个声明中设置当前所有或者指定元素所有外边距的宽度。

外边距可以分为上下左右四个边属性:

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

简写属性为:

margin:margin-top margin-right marign-bottom margin-left; //上右下左
margin-top:10px;
margin-right:60px;
margin-bottom:50px;
margin-left:20px;
​
// 上面四个的分属性我们可以写成一个简写属性
margin:10px 60px 50px 20px;

除了给每个属性设置单独的值,还可以设置两个值,那么它代表的就是:第一个值是上下外边距,第二个值是左右外边距

margin: 10px 20px;

padding

定义元素边框与元素内容之间的空间。

同样的内边距也可以分为四个边属性写法:

  • padding-left
  • padding-right
  • padding-bottom
  • padding-top

简写属性:

padding:padding-top padding-right padding-bottom padding-left;
padding: 20px 30px 40px 50px;

除了给每个属性设置单独的值,还可以设置两个值,那么它代表的就是:第一个值是上下内边距,第二个值是左右内边距:

padding: 20px 40px;

动手小练习

  1. 定义一个 div 然后设置它的边距(分别包括内边距和外边距)

让div margin属性消失_margin 和 padding相关推荐

  1. 让div margin属性消失_为什么div里面打一个字之后就会有高度了呢?

    why? 为啥我要写这个? 有一说一,挺好奇的,对于这种最最基础的问题,我觉得应该要有最最朴实准确的答案. 是文字本身撑开的?试验才是检验真理的唯一标准. 图1 图1当中的 代码如下所示 <!D ...

  2. html div居中属性,让div水平居中设置margin属性

    css怎样让div水准居中呢?div居中前提是甚么?怎样才让div居中呢? 要让div程度居中设置装备摆设margin属性即可. 1.居中枢纽CSS代码:margin:0 auto margin:0 ...

  3. html中margin居中样式,利用margin属性将一个div水平居中将

    div+css,图片怎么设置在DIV中垂直居中? 图片大小不固定,想让图片自动垂直居中,应该怎么设置?想实现类似在表div+css,图片设置在DIV中垂直居中: 方法一: 思路:利用text-alig ...

  4. WPF:Margin属性和Padding属性

    WPF:Margin属性和Padding属性的介绍 1.在进行界面设计时,Margin 和Padding都是对边距进行限制的,其区别在于"一个主外,一个主内". Margin (边 ...

  5. DIV常用属性大全自己整理

    一.属性列表 代码如下:color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 ...

  6. 前端开发div常用属性标签大全

    color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-varian ...

  7. CSS 盒模型之外边距 margin属性

    外边距会在元素外创建额外的空白区域,这个区域不能放置其他元素.因此,大多数情况下,普通流中都是通过外边距来控制元素之间的距离,使元素间出现间隔. 外边距默认是透明的,在这个区域中可以看到父元素的背景. ...

  8. IOS机型margin属性无效问题

    这个问题很多小伙伴都有遇到,这次本猿也遇到了,记录一笔. 结论:简单的解决办法margin换padding!如有误,请大神不吝赐教.在Chrome浏览器移动端测试iphone5,打开的也是没问题的(这 ...

  9. HTML中DIV常用属性

    属性列表 color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-v ...

最新文章

  1. Nacos 1.0.0 GA,架构、功能与 API 设计全面重构
  2. 技术干货-PCB彩印教程(水转印)
  3. 15条走红网络的手机摄影技巧
  4. oracle中通过游标实现查询
  5. python用代码安装3.6_Python3.6安装及引入Requests库的实现方法
  6. iOS - UIEvent事件及UIResponder响应者
  7. python程序设计基础与应用 机械工业出版社_Python程序设计基础与应用
  8. 度假式办公环境、值得拥有!珠海金山软件诚聘CV、C++、后端工程师
  9. 【BZOJ4353】Play with tree,树链剖分线段树
  10. RL笔记 : Lecture 3: Model-free Prediction and Control
  11. 20201016:力扣第210周周赛题解(下)
  12. t检验的显著性p值python_Python P值
  13. 基于SSH框架的人力资源管理系统设计与实现
  14. ADS8332芯片驱动程序
  15. Netron 可视化Pytorh模型架构
  16. STM32F103ZET6+红外温度传感器mlx90614芯片
  17. 关于 360 度评估
  18. java 断点下载_java的断点下载
  19. 翻译翻译,什么叫他妈的惊喜?
  20. miktex+WinEdt 安装步骤

热门文章

  1. IOS --自带二维码扫描
  2. 使用ZFS的十条理由
  3. ***正传——著名网络安全人士郭鑫成长经历
  4. 不能正常关机的处理办法
  5. 【分享】在线解析微信h5网页标签跳转到手机默认浏览器的实现方式
  6. [NOIP2012]同余方程
  7. oracle创建函数和调用存储过程和调用函数的例子(区别)
  8. Go语言中的struct的初始化。
  9. pymysql的使用心得(1)------小细节,注意!
  10. JAVA框架之Hibernate【配置文件详解】