CSS基础学习--11 padding(填充)

news2024/11/25 6:49:33

一、定义

        CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距

        当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。

        单独使用 padding 属性可以改变上下左右的填充。

padding可能的值:

说明
length定义一个固定的填充(像素, pt, em,等)
%使用百分比值定义一个填充

二、填充- 单边内边距属性

        在CSS中,它可以指定不同的侧面不同的填充

<style>
.padding {
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
}
</style>
  • 上内边距是 25px
  • 下内边距是 25px
  • 右内边距是 50px
  • 左内边距是 50px

三、填充 - 简写属性

        为了缩短代码,它可以在一个属性中指定的所有填充属性。

        这就是所谓的简写属性。所有的填充属性的简写属性是 padding

padding:25px 50px;

Padding属性,可以有一到四个值。

  padding:25px 50px 75px 100px;

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

  padding:25px 50px 75px;

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

  padding:25px 50px;

  • 上下填充为25px
  • 左右填充为50px

  padding:25px;

  • 所有的填充都是25px

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/644308.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

软考A计划-系统架构师-案例分析考前背诵-下篇

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…

XSS注入(跨站脚本攻击)

今天学习一下xss注入 1.XSS是什么 XSS注入漏洞又称为"跨站脚本攻击(Cross Site Scripting)"&#xff0c;为了不和层叠样式表(Cascading Style Sheets,CSS)混淆&#xff0c;所以将跨站脚本攻击缩写为XSS。xss本质上是黑客通过对网页的HTML注入&#xff0c;篡改了原本…

C\C++ Thread-多线程

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan 简介 c多线程 时间 c语言的时间处理&#xff1a;time.h 获取从1970年1月1日到当前经过的秒数: long t0 time(NULL); 让程序暂停3秒&#xff1a; sleep(3); 当前时间的3秒后&…

基于Java购物商城系统设计与实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…

Linux 环境下Docker部署项目(七)

文章目录 一、前言二、项目打包上传1. 项目打包简单 (故省略)2. 上传jar包程序到Linux 三、拉取镜像1. 拉取镜像java:8(jdk1.8)2. 拉取 java8 出错&#xff1a; 四、创建Dockerfile文件1. 创建Dockerfile文件2. 编辑Dockerfile3. 构建镜像&#xff08;需要在Dockerfile同级目录…

腾讯安全发布“数字安全免疫力”模型框架,建设发展驱动安全新范式

随着数字化进程加快&#xff0c;企业数字化体系的边界在不断拓展&#xff0c;安全风险和挑战不断增加&#xff0c;传统被动防御的安全应对常显疲态&#xff0c;数字安全时代亟待建立全新的安全范式。 6月13日&#xff0c;腾讯安全联合IDC在北京发布“数字安全免疫力”模型框架…

Nucleo-F411RE (STM32F411)LL库体验 1 - 点亮LED

Nucleo-F411RE &#xff08;STM32F411&#xff09;LL库体验 1 - 点亮LED 1、开发环境 一如既往&#xff0c;还是macos gcc pyocd的开发环境。 pyocd pack find stm32f411retx #命令查找支持包 pyocd pack install stm32f411retx #安装支持包 pyocd flash --erase auto --ta…

跨站点脚本(XSS)的介绍

目录 1、概述 2、XSS普遍认可三种形式&#xff1a; ​2.1 反射式 XSS 攻击 2.2 存储的 XSS 攻击 2.3 基于DOM的XSS 攻击 2.3.1 DOM中相关建议&#xff1a; 2.3.2 利用javascript开发时的建议规则&#xff1a; 3、XSS 攻击后果 4、框架安全 5、XSS 防御理念 6、XSS P…

Linux(链接器的意义)

文章目录 前言一、链接器概念介绍二、目标文件三、main函数是第一个被执行的函数吗&#xff1f;四、链接脚本的意义和作用总结 前言 本篇文章我们来讲解链接器的意义。 一、链接器概念介绍 链接器&#xff08;Linker&#xff09;是计算机编译器系统中的一个重要组成部分&…

MongoDB安装、设置密码、操作命令、配置文件说明、备份与还原

目录 一、mongodb概述 二、mongodb安装部署 三、mongodb设置密码 四、MongoDB操作命令与说明 五、配置文件说明 六、备份与还原 一、mongodb概述 MongoDB是一个非关系型数据库管理系统&#xff0c;它使用文档模型存储数据。MongoDB中的文档类似于JSON对象&#xff0c;可以…

总结899

目标规划&#xff1a; 月目标&#xff1a;6月&#xff08;线性代数强化9讲&#xff0c;背诵15篇短文&#xff0c;考研核心词过三遍&#xff09; 周目标&#xff1a;线性代数强化3讲&#xff0c;英语背3篇文章并回诵&#xff0c;检测 今日已做&#xff1a; 1.读了两篇文章&a…

Spring:InvalidDefinitionException: Direct self-reference leading to cycle

一、现象 一个列表接口报错&#xff0c;没有返回信息&#xff0c;异常堆栈如下&#xff1a; 11:52:05.096 [http-nio-8180-exec-36] ERROR c.u.s.f.w.e.GlobalExceptionHandler - [handleRuntimeException,65] - 请求地址XXXXX,发生未知异常. org.springframework.http.conve…

(el-Tree)操作:Element-plus 中Tree 树形控件的样式等的使用

Ⅰ、Element-plus 提供的Tree树形控件组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供Tree组件情况&#xff1a; 其一、Element-ui 自提供的Table代码情况为(示例的代码)&#xff1a; // Element-plus 自提供的代码&#xff1a; // 此时是使用了 ts 语言环境&…

06-揭开神秘面纱:Golang method的魅力解析

&#x1f4c3;个人主页&#xff1a;个人主页 &#x1f525;系列专栏&#xff1a;Golang基础 &#x1f4ac;Go&#xff08;又称Golang&#xff09;是由Google开发的开源编程语言。它结合了静态类型的安全性和动态语言的灵活性&#xff0c;拥有高效的并发编程能力和简洁的语法。G…

宝鸡陇县中学弱电系统集成设计方案_kaic

摘 要 随着世界各国教育信息化的推进&#xff0c;我国在教育信息基础设施和资源上也在逐步加快步伐。校园信息化平台的建设关系到校园网站的技术实现、广播系统、视频监控系统的建设&#xff0c;能够使知识获取更便捷、校园文化生活更丰富、校园管理更精准。利用信息交互的特性…

chatgpt赋能python:Python如何排列输出列表的数

Python如何排列输出列表的数 Python是一门广泛应用于数据分析、科学计算等领域的编程语言&#xff0c;其简洁易学、强大的编程特性使得其成为很多领域中的首选语言。在Python中&#xff0c;列表是一种非常常见的数据结构&#xff0c;其可以存储大量相关数据&#xff0c;并且通…

【八大排序(五)】快排进阶篇-挖坑法+前后指针法

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:八大排序专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习排序知识   &#x1f51d;&#x1f51d; 快排进阶篇 1. 前情回顾2. 思路回顾3. 单…

chatgpt赋能python:Python排列组合:让编程更简单

Python排列组合&#xff1a;让编程更简单 Python是一种现代化的编程语言&#xff0c;同时也是一种强大的工具。在Python中&#xff0c;排列组合是极其重要的一种操作。在本篇文章中&#xff0c;我们将介绍Python中的排列组合&#xff0c;并探讨如何利用Python编程语言进行排列…

十.多线程

1、进程与线程 &#xff08;1&#xff09;操作系统与进程 1.程序&#xff1a;代码。 2.进程&#xff1a;程序的动态执行过程。 &#xff08;2&#xff09;进程与线程 线程&#xff1a;线程&#xff1a;是比进程更小的执行单位&#xff0c;一个进程在其执行过程中&#xff0…

chatgpt赋能python:Python中如何找到编程中的错误

Python中如何找到编程中的错误 Python是一种旨在提高开发者生产力的高级编程语言。由于其简洁性和可读性&#xff0c;它越来越成为开发者们的首选语言。然而&#xff0c;就像其他编程语言一样&#xff0c;Python编程中难免会有错误。本文将介绍一些有用的技巧和工具&#xff0…