边框(border)边距(margin)和间隙(padding)属性的区别

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

　　下面这个示意图，很形象地体现了三者之间的区别。

这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

赞 (0)

相关推荐

  • 边框(border)边距(margin)和间隙(padding)属性的区别

    边框(border)边距(margin)和间隙(padding)属性的区别

    边框属性(border)用来设定一个元素的边线. 边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离. 间隙属性(padding)是用来设置元素内容到元素边界的距离. 这三个属性都属于CSS中box类型的属性. 下面这个示意图,很形象地体现了三者之间的区别. 这里提供一张盒模型的3D示意图,希望便于你的理解和记忆.

  • CSS学习笔记Padding 属性中参数的定义与使用

    一直都对CSS中Padding 属性中参数个数的定义颇为困惑,例如: body { padding: 32px;} body { padding: 32px 24px; } body { padding: 32px 24px 18px; } body { padding: 32px 24px 18px 12px; } 今天baidu查看了CSS的标准文档,其中是这样规定的: 如果只提供一个,将用于全部的四条边: 如果提供两个,第一个用于上-下,第二个用于左-右: 如果提供三个,第一个用于上,第二

  • 前端jquery部分很精彩

    前端jquery部分很精彩

    一.简介 jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery. 二.选择器 1.id选择器 <body> <

  • CSS锦囊

    在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额.本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考. 有疑问,先验证 在调试时,先对您的代码进行验证往往能省去不少麻烦事.格式不正确的XHTML/CSS 会导致许多布局上的错误. 在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反. 如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果"不正常&qu

  • 推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页

    作者:唐国辉 实例网页网址:http://www.hsptc.com/css2.html前言       如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和

  • flutter TextField换行自适应的实现

    无论哪种界面框架输入文本框都是非常重要的控件, 但是发现flutter中的输入框TextField介绍的虽然多,但是各个属性怎么组合满足需要很多文章却说不清楚, 再加上控件版本变更频繁很多功能的介绍都是比较陈旧的属性.现在就需要一个类似微信的输入文本框, 这样一个非常实用的效果flutter要如何实现?前提是尽量用已有属性,少写或不写代码. 先明确这种输入文本框有哪些功能点? 能够自定义各种间距.主要是控件外边距(margin); 内间距(padding); 能够自定义样式. 输入框边框(圆角(

  • CSS2快速参考

    自W3C(The World Wide Web Consortium)制定了代号为Cougar的HTML的4.0版本以来,存在在Web页面中的动态效果首次被正式的承认了,W3C把动态超文本(Dynamic HTML)的实现分为了三个部分:脚本.支持动态效果的浏览器和CSS.前两者也许你经常用到,但CSS是什么或许你并不清楚,如果有过制作Web页面的经历,你可能听说过样式单或风格单,如果对此你亦无耳闻,不要紧,只要你想制作出具有更多新特性的W eb页,本文将同样适合于你.   一.什么是CSS? 

  • 单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)

    以下是核心文件: index.php文件 复制代码 代码如下: <?php header('Content-Type:text/html charset:utf-8'); date_default_timezone_set('PRC'); $rootDir = 'listFile'; //站点根目录,装载本程序所有文件 //站点base_url设置方法: //考虑到通用性,现默认使用方法二,修改方法时注意同时修改.htaccess文件 //方法一:设置站点目录为根目录 //对应.htaccess

  • Java创建、识别条形码和二维码方法示例

    Java创建、识别条形码和二维码方法示例

    前言 条形码(Barcode)是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符.常用于标示物品的生产国.制造厂家.商品名称.生产日期.图书分类号.邮件起止地点.类别.日期等信息,广泛应用于各个领域.常见的包括一维条码(条码).二维条码(二维码).彩色条码,在具体码制上可分为多种不同类型的条码,如UPC(统一产品代码,只能以数字表示).Code 3(能表示字母.数字和其它一些符号共43个字符).Code 128(表示高密度数据,字符串可变长,符号内含校验码).Co

  • Class与ID区别 margin和padding区别 CSS学习笔记

    由于现在百分之99.99%的CMS都是用div+css来构建网页模板的,被逼无奈,一大把年纪了还要学习CSS,说实话没觉得用div来布局比table好在什么地方!但迫于行势,先硬着头皮看吧,能学多少是多少.根据数据与结构分离的原则,CSS最好要独立于网页文件,用 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="../xxx/web.css" /> 语句将CSS文件调入网页

随机推荐