Css盒模型属性详解(margin和padding)

大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识!

关于盒模型的属性详解及用法

盒模型基本属性有两个:padding和margin。

以边框border为界,边框里面是内边距,边框外面是外边距。

1.内边距padding:如上图,如果父元素设置了边框,内边距是指235*240大小的内容区与边框之间的距离,不管父元素是否设置边框,更准确地说,内边距可以控制父元素和子元素或者元素和内容之间的距离(元素相对于内容来说也是父元素),padding属性要加在父元素的css属性里。padding值会把元素原有大小撑大,如果想让元素维持原有大小,一定要在元素宽高上减去所加padding值。

padding的复合式写法:

padding:10px;(表示元素上下左右内边距都是10px)

padding:10px 10px;(表示元素上下内边距是10px,左右内边距是10px)

padding:10px 10px 10px;(表示元素上内边距是10px,左右内边距是10px,下内边距是10px)

padding:10px 10px 10px 10px;(表示元素上内边距是10px,右内边距是10px,下内

边距是10px,左内边距是10px)

padding的分开式写法:

padding-top: 10px;(表示元素上内边距是10px)

padding-right: 10px;(表示元素右内边距是10px)

padding-bottom: 10px;(表示元素下内边距是10px)

padding-left: 10px;(表示元素左内边距是10px)

2.外边距margin:如上图,如果父元素设置了边框,外边距是指边框以外与其他同辈元素之间的距离,不管父元素是否设置边框,更准确地说,外边距可以控制同辈元素之间的距离。

margin值不会撑大元素原有大小,但会增加它所占区域。上下两个元素之间的的margin值会重叠显示,取两个值中最大的值。左右margin值不会叠加。

margin的复合式写法:

margin:10px;(表示元素上下左右外边距都是10px)

margin:10px 10px;(表示元素上下外边距是10px,左右外边距是10px)

margin:10px 10px 10px;(表示元素上外边距是10px,左右外边距是10px,下外边距是10px)

margin:10px 10px 10px 10px;(表示元素上外边距是10px,右外边距是10px,下外

边距是10px,左外边距是10px)

margin的分开式写法:

margin-top: 10px;(表示元素上外边距是10px)

margin-right: 10px;(表示元素右外边距是10px)

margin-bottom: 10px;(表示元素下外边距是10px)

margin-left: 10px;(表示元素左外边距是10px)

Css盒模型属性详解(margin和padding)的更多相关文章

  1. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  2. CSS3中的弹性流体盒模型技术详解

    先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...

  3. CSS盒模型属性详细介绍

    一.概述 CSS盒模型是定义元素周围的间隔.尺寸.外边距.边框以及文本内容和边框之间内边距的一组属性的集合. 示例代码: <!DOCTYPE html> <html lang=&qu ...

  4. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  5. CSS盒子模型之详解

    前言:        盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念    CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...

  6. css中border-sizing属性详解和应用

    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...

  7. 详解CSS盒模型(转)

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  8. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

  9. css 11-CSS3属性详解(一)

    11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...

随机推荐

  1. 使用Rancher pipeline搭建基于容器的CICD

    CICD概述 CI-持续集成(Continuous Integration):频繁地将代码集成到主干的一种开发实践,每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错 ...

  2. IOC初始化销毁的2种实现方式

    IOC初始化销毁的2种实现方式 1.bean内调用init-method 和destroy-method 2.通过注解实现@PostConstruct 和@PreDestroy ----------- ...

  3. ionic2踩坑之自定义插件开发及调用

    关于ionic2自定义插件开发的文章,插件怎么调用的文章,好像网上都有,不过作为一个新手来说,从插件的开发到某个页面怎么调用,没有一个完整的过程的话,两篇没有关联的文章也容易看的迷糊.这里放到一起来方 ...

  4. string删除与查找erase,find

    s.erase( 指针位置 , 删除长度 ) 返回值修改后的string对象引用 find(string, int):第一个参数用来指示要查找的字符,第二个参数用来表示从字符串的何处开始查找子串(默认 ...

  5. <JZOJ4726>种花

    挺有意思的贪心 神奇的贪心 #include<cstdio> #include<iostream> #include<cstring> #include<al ...

  6. 奇异值分解SVD

    在介绍奇异值分解(SVD)之前我们先来回顾一下关于矩阵的一些基础知识. 矩阵基础知识 方阵 给定一个$ n×m $的矩阵$ A $,若n和m相等也就是矩阵的行和列相等那矩阵$ A $就是一个方阵. 单 ...

  7. Ubuntu和window10 安装双系统

    先安装window10,然后空出一部分储存空间,我空出来了103G. 然后安装ubuntu分区的时候注意: 刚开始安装的时候:出现安装类型的时候:选择其他选项: 在分区的时候:单击127117(这里是 ...

  8. 从一道网易面试题浅谈 Tagged Pointer - darcy_tang 的博客

    前言 这篇博客九月就想写了,因为赶项目拖了到现在,抓住17年尾巴写吧~ 正文 上次看了一篇 <从一道网易面试题浅谈OC线程安全> 的博客,主要内容是: 作者去网易面试,面试官出了一道面试题 ...

  9. OpenStack入门

    云计算优势 降低成本,安全稳定,易扩展. 云计算三种服务模式 IaaS:基础设施即服务 IaaS(Infrastructure-as-a- Service):基础设施即服务.消费者通过Internet ...

  10. 录音文件lame转换MP3相关配置

    文件下载整个功能完成了,那么对应的文件上传也跑不了.So~ Look here~ 业务需求是录制音频然后上传到七牛并且Android可以读. 与安卓沟通了一下统一了mp3格式,大小质量都不错.由于AV ...