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. mac命令日常总结

    查看某个端口被占用 lsof -i tcp:8080 kill进程: 找到进程的PID,使用kill命令:kill -9 716(PID) date 显示系统日期 mkdir xx 创建xx目录 rm ...

  2. 关于使用gitlab协同开发提交代码步骤

    记录使用gitlab协同开发时从自己的分支向master分支提交代码的步骤: 环境:安装了git和TortoiseGit(git的可视化工具) 1.首先切换到自己的分支(如果不在自己的分支) 2.gi ...

  3. SWUST OJ 爬不出去的水井(0333)

    爬不出去的水井(0333) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 1069 Accepted: 150 Descriptio ...

  4. HTML5全屏背景视频与 CSS 和 JS（插件或库）

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  5. 【底层原理：深入理解计算机系统】#1 一切从"hello world"说起 （一）

    计算机系统是由硬件和系统软件组成的,他们共同工作来运行应用程序.虽然系统的具体实现方式随着时间不断的在变化,但是系统的内在概念却没有改变的. 所有的计算机硬件和软件有着相似的结构和功能.这个系列专题便 ...

  6. js数据类型大全

    声明变量的命名规范(标识符) 1.不能以数字开头,只能以字母或者￥或者_开头 2.js变量名称区分大小写 3.变量名不能含有关键字(this.if.for.while) 4.驼峰命名法 console ...

  7. springmvc两种配置方法

    基于配置文件xml方式, 配置springmvc步骤: 1.在pom文件中引入jar包: <!--导入springmvc的jar包--> <dependency> <gr ...

  8. mac 使用命令行向 github 提交代码

    让 mac 本地和自己的 github 网站建立连接(ssh) 下载安装 git 网址: https://git-scm.com/downloads 查看安装是否成功: git -version $ ...

  9. Docker Compose 项目打包部署

    Docker Compose 前面我们使用 Docker 的时候,定义 Dockerfile 文件,然后使用 docker build.docker run 等命令操作容器.然而微服务架构的应用系统一 ...

  10. python安装pip (windows64)

    1.前提条件是先安装了easy_install(easy_install安装教程http://www.cnblogs.com/IT-Crowd/articles/6528469.html) 2.在ea ...