在CSS里面，所有的HTML元素都可以看成是一个盒子。

那么在设计和布局的时候，最常用的，也就是用来定义这个盒子的外边距的就是margin

定义这个盒子的内边距的就是padding

元素的内容所占的宽度是由width属性来设置的，那么元素在HTML页面所占的总的宽度是多少呢。

是width + padding-left + padding-right + border-left-width + border-right-width 这才是元素占整个HTML页面的总宽度。

对于边框，我们可以使用border-style来设置边框的样式

通过border-width来设置边框的宽度。

通过border-color来设置边框的颜色。

通过margin属性来设置元素的外边距。

可以对上下左右分别进行设置，使用下面的语法：

margin-top 上边距； margin-bottom：下边距 margin-left：左边距；margin-right:右边距。

填充的使用方法与margin的使用方法是类似的。

PHP全栈开发（八）：CSS Ⅷ border margin padding的更多相关文章

  1. Python全栈开发：css引入方式

    css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...

  2. Python 全栈开发八 文件处理

    一.基本流程 打开文件得到文件句柄 将文件句柄赋值给一个变量 通过文件句柄对文件进行操作 关闭文件 二.基本操作 1.文件句柄 f = open("a.txt",encoding= ...

  3. 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)

    点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...

  4. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  5. python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  6. Python 全栈开发【第0篇】：目录

    Python 全栈开发[第0篇]:目录   第一阶段:Python 开发入门 Python 全栈开发[第一篇]:计算机原理&Linux系统入门 Python 全栈开发[第二篇]:Python基 ...

  7. .NET全栈开发工程师学习路径

    PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...

  8. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

  9. Python全栈开发【基础一】

    Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...

随机推荐

  1. 通过类名引用静态成员方法和通过super引用父类的成员方法

    package com.yang.Test.StaticMethodReference; /** * 通过类型引用静态成员方法 * 类已经存在,静态成员方法也已经存在 * 就可以通过类名直接引用静态成 ...

  2. 特殊的阻塞队列 - java.util.concurrent.SynchronousQueue 分析

    描述 SynchrounousQueue 是一个比较特殊的无界阻塞队列并支持非公平和公平模式,严格意义上来说不算一个队列,因为它不像其他阻塞队列一样能有容量,它仅有一个指向栈顶的地址,栈中的节点由线程 ...

  3. SkiaSharp 之 WPF 自绘 五环弹动球（案例版）

    此案例基于拖曳和弹动球两个技术功能实现,如有不懂的可以参考之前的相关文章,属于递进式教程. 五环弹动球 好吧,名字是我起的,其实,你可以任意个球进行联动弹动,效果还是很不错的,有很多前端都是基于这个特 ...

  4. React报错之map() is not a function

    正文从这开始~ 总览 当我们对一个不是数组的值调用map()方法时,就会产生"TypeError: map is not a function"错误.为了解决该错误,请将你调用ma ...

  5. 【原创】Selenium获取请求头、响应头

    本文仅供学习交流使用,如侵立删! Selenium获取请求头.响应头 操作环境 win10 . mac Python3.9 selenium.seleniumwire selenium是没有办法直接获 ...

  6. 057_末晨曦Vue技术_处理边界情况之强制更新($forceUpdate)与通过 v-once 创建低开销的静态组件

    强制更新($forceUpdate) 点击打开视频讲解更加详细 在vue中,如果data中有基本数据类型变量:age,修改他,页面会自动更新. 但如果data中的变量为数组或对象(引用数据类型),我们 ...

  7. Taurus.MVC 微服务框架 入门开发教程：项目集成：4、默认安全认证与自定义安全认证。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  8. NOI P序列题 （二分）

    题面 题解 --WQS二分 想到这个这题就完了. 赛时没想到这个你就完了. 时间复杂度 O ( n log ⁡ a ) O(n\log a) O(nloga) 不难发现这题有凸性,可以WQS二分. 我 ...

  9. 【IDEA】IDEA怎么汉化&汉化后怎么转回英文

    ① 英文转中文 1.点击左上角的File,然后选择Setting 2.达到Setting页面选择Plugins 3.在搜索框搜索chinese,选择中文语言包下载 4.找到下载插件,选择勾选上,然后o ...

  10. 配置Windows server dhcp与AD域对接并使用Win1创的用户登录Win2

    创建两台windows_server_2012 创建步骤链接(https://www.cnblogs.com/zhengyan6/p/16338084.html) 注意:所有虚拟机都要在同意网段 配置 ...