在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. shell中各种括号的用法

    一.单小括号()1.将某个命令的返回值作为某个变量的值进行传递 #!/bin/bash USER=$(whoami) echo $USER [root@jump ~]# for i in $(seq ...

  2. 【水】关于 __attribute__

    目录 1. weak 2. aligned 3. __packed__ 4. always_inline 1. weak 实现如果 Func1 被定义了,我就调用 Func1, 否则就调用 MyFun ...

  3. 2537-springsecurity系列--关于session的管理2-session缓存和共享

    版本信息 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring ...

  4. 无意苦争春，一任群芳妒！M1 Mac book(Apple Silicon)能否支撑全栈工程师的日常？(Python3/虚拟机/Docker/Redis)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_187 就像大航海时代里突然诞生的航空母舰一样,苹果把玩着手心里远超时代的M1芯片,微笑着对Intel说:"不好意思,虽然 ...

  5. odoo14 重启服务后权限不见了

    1 Odoo14权限更新有两个地方: 2 一.你在编写xml权限记录的时候没有将noupdate设置为'1'这样导致你每次升级模块,你的权限都会重置一遍. 3 二.你在运行odoo-bin服务的时候, ...

  6. Java面试题(六)--Redis

    1 Redis基础篇 1.简单介绍一下Redis优点和缺点? 优点: 1.本质上是一个 Key-Value 类型的内存数据库,很像memcached 2.整个数据库统统加载在内存当中进行操作,定期通过 ...

  7. powershell 执行策略

    前言 上一篇博文,我介绍了一下powershell和cmd的对比.通过学习,我发现powershell的确比cmd更加power,也更加适应现在的使用场景. 那么本文将继续介绍一个powershell ...

  8. java的stream让我灵光一现

    说实话,我是一个到了退役也没有搞明白C++的istream和ostream的. 刚开始的时候我把<iostream>直接拆解成ios和tream 真,果粉暴露 退役之后划水,倒是从java ...

  9. Java中list集合自定义排序-2022新项目

    一.业务场景 为了加快首页数据查询的效率,因此将首页查询的数据大多数都放在了缓存中,包括各种list集合数据.对这些 从缓存中获取的数据做了一个兜底处理,如果从缓存中没有获取到数据,则直接从数据库中去 ...

  10. 【RocketMQ】事务的实现原理

    事务的使用 RocketMQ事务的使用场景 单体架构下的事务 在单体系统的开发过程中,假如某个场景下需要对数据库的多张表进行操作,为了保证数据的一致性,一般会使用事务,将所有的操作全部提交或者在出错的 ...