当前位置: 首页 > news >正文

border padding margin , the difference among them

在CSS中,它们都是box盒子类型的属性,用来表示距离。
margin:层的边框以外留的空白,padding:层的边框到层的内容之间的空白,border:边框,content:内容。

border padding margin

  边框属性(border)用来设定一个元素的边线。
  边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
  间隙属性(padding)是用来设置元素内容到元素边界的距离。
  这三个属性同属CSS中box类型的属性。


  1、边框样式border
  语法:border : border-width || border-style || border-color
  参数: 该属性是复合属性。请参阅各参数对应的属性。
  默认值为:medium none。border-color的默认值将采用文本颜色。 要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
  例如: p { border: thick double yellow; }

  2、空白Padding,语法: padding : length
  参数:length :由浮点数字和单位标识符组成的长度值或者百分数。百分数是基于父对象的宽度。请参阅长度单位。
  Padding 缩写介绍:
  检索或设置对象四边的补丁边距。如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
  例如:p { padding: 36pt 24pt 36pt; }

  3、边距Margin,语法:margin : auto | length
  参数:
  auto:值被设置为相对边的值
  length :由浮点数字和单位标识符组成的长度值或百分数。百分数是基于父对象的高度。
  margin 缩写介绍:
  如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
  Margin的外边距属性有:margin-top---上边距,margin-right---右边距,margin-bottom---下边距,margin-left---左边距。
  举例如下:
  body { margin: 36pt 24pt 36pt; }
  body { margin: 11.5%; }
  body { margin: 10% 10% 10% 10%; }   

转载于:https://www.cnblogs.com/diyingyun/archive/2012/01/18/2325870.html

相关文章:

  • MATLAB概率统计函数(1)
  • hoj1058 Number Triangles
  • 五、oracle 表的管理
  • 花了500学的seo课程教程笔记公布
  • 张清:当你把写博客当做一种习惯的时候
  • 一个简陋的web站点文档安全访问
  • Websphere Application Server 6.1安装配置(二)
  • Centos 5.5 i386 配置postfix+courier-imap+maildrop+courier-authlib+extmail+extman+spamassassin组合...
  • 由浅入深CIL系列【目录索引】+ PostSharp AOP编程【目录索引】
  • Cacti+Nagios完全攻略(二)整合cacti与nagios安装部署
  • 一些上流的CSS3图片样式
  • .NET Framework与.NET Framework SDK有什么不同?
  • 网络知识整理(2)
  • ASP.Net编译设置
  • 下载外挂后,网络变的非常慢等症状
  • android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
  • C++类中的特殊成员函数
  • canvas 高仿 Apple Watch 表盘
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • extract-text-webpack-plugin用法
  • Flex布局到底解决了什么问题
  • Git初体验
  • Java 实战开发之spring、logback配置及chrome开发神器(六)
  • Java 网络编程(2):UDP 的使用
  • JavaScript服务器推送技术之 WebSocket
  • MySQL用户中的%到底包不包括localhost?
  • Python 反序列化安全问题(二)
  • Vue.js 移动端适配之 vw 解决方案
  • 初识 webpack
  • 给github项目添加CI badge
  • 基于axios的vue插件,让http请求更简单
  • 警报:线上事故之CountDownLatch的威力
  • 利用DataURL技术在网页上显示图片
  • 双管齐下,VMware的容器新战略
  • 小程序开发中的那些坑
  • 携程小程序初体验
  • scrapy中间件源码分析及常用中间件大全
  • 整理一些计算机基础知识!
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • #我与Java虚拟机的故事#连载07:我放弃了对JVM的进一步学习
  • (二)windows配置JDK环境
  • (二开)Flink 修改源码拓展 SQL 语法
  • (图)IntelliTrace Tools 跟踪云端程序
  • (转)Sublime Text3配置Lua运行环境
  • (转)清华学霸演讲稿:永远不要说你已经尽力了
  • **登录+JWT+异常处理+拦截器+ThreadLocal-开发思想与代码实现**
  • .“空心村”成因分析及解决对策122344
  • .bat批处理(一):@echo off
  • .Net IE10 _doPostBack 未定义
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .net的socket示例
  • .net连接MySQL的方法
  • .NET中winform传递参数至Url并获得返回值或文件
  • [ Linux ] Linux信号概述 信号的产生
  • [<MySQL优化总结>]