CSS设置内外边距

目录

 内边距（paddingj）：

前言：

设置内边距：

外边距（margin）：

 前言：

设置外边距：

补充(折叠)：

 内边距（padding）：

前言：

        内边距(padding)是元素内容跟元素边框之间的距离，就像我在一个盒子里面放一本书(内容)这个盒子的边框到这本书的距离就是内边距，书越大盒子越小内边距就会越小，其属性如下所示：

  • padding-top:可以设置元素距离上面边框的距离。
  • padding-right：可以设置元素距离右边边框的距离
  • padding-bottom：可以设置元素距离下面边框的距离。
  • padding-left：可以设置元素距离左边边框的距离。
  • padding：可以一次性设置元素距离上下左右边框的距离。

初识CSS-CSDN博客 CSS设置网页颜色-CSDN博客 0基础看这一篇就够了HTML教程(详细汇总)_php代码格式-CSDN博客

上述属性的可选值如下：

值说明
length使用数值配合px，cm单位来定义元素的尺寸，不可以设置负值，默认为0px。
%定义基于父元素的宽度的  内边距，不可以设置为负的。
inherit从元素继承对内边距的设置。

使用padding属性时需要注意：

  • 如果你要一次设置四个参数，那么需要按照上，右，下，左的顺序依次设置元素四个方面的内边距。
  • 如果你只提供三个参数，那第一个将会用来设置上面距离边框的距离，第二个将会被用来设置左，右两个方向距离边框的距离，最后一个将会被用来设置距离下方到边框的距离。
  • 如果一次只提供两个参数，那第一个参数会被用来上，下两个方向的内边距，另外一个参数会被用来设置左，右两个方向的内边距。
  • 如果你只提供一个参数，那么这个参数将是四个方向的值。

设置内边距：

上述属性的示例代码如下所示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {height: 60px;width: 300px;}.top {background-color: aqua;padding-top: 20px;}.bottom {background-color: rgb(51, 26, 212);padding-bottom: 30px;}.left {background-color: blue;padding-left: 30px;}.right {background-color: blueviolet;padding-right: 20px;}.padding {background-color: aquamarine;padding: 20px 10px 3px 7px;}</style>
</head><body><p class="top">padding-top:20px;</p><p class="bottom">padding-bottom:30px;</p><p class="left">padding-left:30px</p><p class="right">padding-right:20px</p><div class="padding">padding:20px 10px 3px 7px;</div>
</body></html>

        上述代码的运行结果如下所示：其中绿色框起来的是padding，红色框起来的是内容，这里并无难点所以不过多讲解。

外边距（margin）：

 前言：

        在HTML很多元素都有边框(margin),外边框就是在边框以外的区域，这片区域不受很多属性的影响。

打个比方如:门，其的组成部分有可打开的门就是元素的内容，还有固定门的门框也就是边框，其边框以外的就是外边距。

设置外边距：

        在默认情况下一般元素是没有外边距的，但是也会有些例外，因为浏览器会给HTML元素设置默认值有些HTML元素的就会有一个设置了的外边距。比如<h1>....<h6>元素，我们也可以使用下面属性来给HTML元素设置外边距：

  • margin-top:设置元素上面的外边距。
  • margin-bottom：设置元素下面的外边距。
  • margin-right：设置元素右边的外边距。
  • margin-left：设置元素左边的外边距。
  • margin：也就是上述所有属性的简写，可以同时设置四个方向(上下左右)的外边距。

上述属性可选值如下所示：

值说明
auto浏览器自己来计算的外边距尺寸。
length使用数值配合单位px，cm等等来定义元素外边距的尺寸，可以设置负值，默认情况下为0px
%基于父元素的宽度百分比的外边距，可以设置负数。
inherit从父元素中继承对外边距的设置。

使用margin属性时需要注意：

  • 如果你要一次设置四个参数，那么需要按照上，右，下，左的顺序依次设置元素四个方面的外边距。
  • 如果你只提供三个参数，那第一个将会用来设置上面，第二个将会被用来设置左，右两个方向，最后一个将会被用来设置下面。
  • 如果一次只提供两个参数，那第一个参数会被用来上，下两个方向，另外一个参数会被用来设置左，右两个方向。
  • 如果你只提供一个参数，那么这个参数将是四个方向的值。

上述属性示例代码如下所示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.direction {background-color: aqua;width: 400px;height: 200px;border: 2px solid blue;}.mark1 {border: 4px solid red;margin-top: 30px;margin-bottom: 30px;margin-left: 40px;margin-right: 20px;}.margin {background-color: bisque;width: 300px;height: 100px;border: 2px solid blue;}.mark2 {border: 3px solid red;margin: 17px 13px 16px 17px;}</style>
</head><body><div class="direction"><p class="mark1">direction啥都没得的一行</p></div><br> <br><div class="margin"><p class="mark2">margin一个集合体</p></div></body></html>

        上述代码的运行结果如下所示：下面红色的是代码的，绿色的是外边距，可以看到无论是一个个的设置还是用margin全部一起设置，都可以可以的。

补充(折叠)：

        外边距折叠指的是两个相邻的元素或者多个元素的外边距会在垂直方向向上发生合并，变成一个外边距，外边距折叠需要注意的是：

  • margin折叠只会发生在块级元素上。
  • 浮动元素的外边距不会跟任何外边距发生折叠。
  • 如果元素设置了overflow属性并且其属性的值不是visible的块级元素，它将不会跟子元素发生外边距折叠。
  • 绝对定位的元素的外边距不会跟任何外边距发生折叠。
  • 根元素(<body>)的外边距不会跟任何外边距发生折叠。

1) 在相邻的两个兄弟元素之间：

  • 如果相邻两个元素外边距的值都为正数，那么两个元素的实际间距为大的那个。
  • 如果相邻两个元素外边距的值都为负数，那么两个元素的实际间距为小的那个。
  • 如果相邻两个元素外边距的值一个为正数、一个为负数，那么两个元素之间的实际间距为两个外边距相加的和。

示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bottom {border: solid 2px red;width: 200px;height: 100px;background-color: aqua;/* margin-bottom: 40px; *//* margin-bottom: -40px; */margin-bottom: -40px;}.top {border: solid 2px red;width: 200px;height: 100px;background-color: rgb(145, 255, 0);/* margin-top: 20px; *//* margin-top: -20px; */margin-top: 20px;}</style>
</head><body><p class="bottom">bottom:40px</p><p class="top">top:20px</p>
</body></html>

代码运行结果如下所示：

2) 在父元素与其子元素之间：

注意：父元素不能定义边框和内边距，且父元素与子元素之间不能有其它元素

  • 如果父元素与子元素外边距的值都为正数，那么折叠后的外边距为两个外边距中较大的那个。
  • 如果父元素与子元素外边距的值都为负数，那么折叠后的外边距为两个外边距中较小的那个。
  • 如果父元素与子元素外边距的值一个为正数、一个负数，那么折叠后的外边距为两个外边距相加的和。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {border: 2px solid red;background-color: aqua;width: 200px;height: 20px;/* margin-bottom: 30px; */margin-bottom: 30px;}p {border: 2px solid red;background-color: rgb(207, 207, 6);/* margin-top: 20px; *//* margin-top: -10px; */margin-top: -30px;}</style>
</head><body><div>margin-bottom<p>margint-top元素的外边框</p></div></body></html>

代码运行结果如下所示：

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

阿里云服务器怎么购买价格更便宜？优惠大揭秘！

阿里云服务器怎么购买价格更便宜？优惠大揭秘！

阿里云服务器租用价格表2024年最新&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核…
阅读更多...
cesium 平滑显示billboard 透明度

cesium 平滑显示billboard 透明度

描述&#xff1a;加载billboard的时候&#xff0c;要么是显示&#xff0c;要么是隐藏&#xff0c;不能平滑的显示&#xff0c;有个从不显示到显示的过程 解决方案&#xff1a;创建billboard的时候给一个color&#xff0c;颜色为(255,255,255)&#xff0c;透明度从0-1 let opaci…
阅读更多...
A Learning-Based Approach for IP Geolocation（2010年）

A Learning-Based Approach for IP Geolocation（2010年）

下载地址：Towards IP geolocation using delay and topology measurements | Proceedings of the 6th ACM SIGCOMM conference on Internet measurement 被引次数：185 Eriksson B, Barford P, Sommers J, et al. A learning-based approach for IP geolocation[C]//Passive …
阅读更多...
【UE Niagara】自定义模块的简单使用

【UE Niagara】自定义模块的简单使用

效果 步骤 新建一个Niagara系统&#xff0c;使用“Empty”模板&#xff0c;这里命名为“NS_Custom” 打开“NS_Custom”&#xff0c;添加一个“Spawn Burst Instantaneous”来单次生成1个粒子 在“Emitter State”模块中&#xff0c;设置生命循环模式为“Self”&#xff0c;循…
阅读更多...
【vue】toRef，toRefs

【vue】toRef，toRefs

toRef&#xff1a;把一个 响应式对象 转换为对应的ref变量toRefs&#xff1a;把一个 响应式对象 转换为对应的ref对象 代码 <template><P>mname: {{ mname }} </P><P>mage: {{ mage }} </P><P>msex: {{ msex }} </P><P>mhobb…
阅读更多...
购物车实现

购物车实现

目录 1.购物车常见的实现方式 2.购物车数据结构介绍 3.实例分析 1.controller层 2.service层 1.购物车常见的实现方式 方式一&#xff1a;存储到数据库 性能存在瓶颈方式二&#xff1a;前端本地存储 localstorage在浏览器中存储 key/value 对&#xff0c;没有过期时间。s…
阅读更多...
配置VM开机自启动

配置VM开机自启动

1. 在此电脑-右键选择“管理”-服务和应用程序-服务中找到VMware Workstation Server服务&#xff08;新版名称也可能是VMware自启动服务&#xff0c;自己找一下&#xff0c;服务属性里有描述信息的&#xff09;&#xff0c;将其启用并选择开机自动启动 新版参考官方文档&…
阅读更多...
蓝桥杯【第15届省赛】Python B组

蓝桥杯【第15届省赛】Python B组

这题目难度对比历届是相当炸裂的简单了…… A&#xff1a;穿越时空之门 【问题描述】 随着 2024 年的钟声回荡&#xff0c;传说中的时空之门再次敞开。这扇门是一条神秘的通道&#xff0c;它连接着二进制和四进制两个不同的数码领域&#xff0c;等待着勇者们的探索。 在二进制…
阅读更多...
ReactRouter

ReactRouter

React-Router 概念&#xff1a;一个路劲path对应一个组件component 当我们在浏览器中访问一个path的时候&#xff0c;path对应的组件会在页面中进行渲染路由语法&#xff1a; import {createBrowserRouter, RouterProvider} from react-router-dom// 1. 创建router实例对象并…
阅读更多...
【算法刷题 | 回溯思想 02】4.12（电话号码的字母组合）

【算法刷题 | 回溯思想 02】4.12（电话号码的字母组合）

文章目录 4.电话号码的字母组合4.1问题4.2解法&#xff1a;回溯4.2.1回溯思路&#xff08;1&#xff09;函数返回值以及参数&#xff08;2&#xff09;终止条件&#xff08;3&#xff09;遍历过程 4.2.2代码实现 4.电话号码的字母组合 4.1问题 给定一个仅包含数字 2-9 的字符…
阅读更多...
threejs 基础知识点汇总

threejs 基础知识点汇总

threejs 基础知识点汇总 之前写了几篇博文&#xff0c;但是我觉得写的不好&#xff0c;我今天再补充一篇还不好的&#xff0c;把基础知识点汇总一下&#xff0c;不写运行的代码了&#xff0c;只写关键代码&#xff0c;但是看了之前我写的那几篇&#xff0c;看这篇的话问题其实不…
阅读更多...
jdk17 你还想用ScriptEngineManager来执行js代码？

jdk17 你还想用ScriptEngineManager来执行js代码？

今天要用java来执行配置表的js代码&#xff0c;用 ScriptEngine javaScriptEngine new ScriptEngineManager().getEngineByName(“javascript”); 一直抛异常&#xff1a;Cannot invoke “javax.script.ScriptEngine.eval(String)” because “javaScriptEngine” is null 网上…
阅读更多...
Springboot集成Elastic-job

Springboot集成Elastic-job

ElasticJob 通过弹性调度、资源管控、以及作业治理的功能&#xff0c;打造一个适用于互联网场景的分布式调度解决方案&#xff0c;并通过开放的架构设计&#xff0c;提供多元化的作业生态。 1 项目集成 1.1 springboot项目配置 导入依赖&#xff1a; <!--mysql连接基本配…
阅读更多...
SSL证书添加与ICP备案，对于SpringBoot的要求

SSL证书添加与ICP备案，对于SpringBoot的要求

配置了SSL证书之后&#xff0c;在SpringBoot的resources文件夹里的application.properties会添加以下代码&#xff1a; server.port443 不需要添加server.address。不然会报错。 https类型的请求默认在Postman里面不可请求。 经过SSL证书处理的网页&#xff0c;链接中使默认…
阅读更多...
LDRA Testbed软件静态分析_常见问题及处理

LDRA Testbed软件静态分析_常见问题及处理

系列文章目录 LDRA Testbed软件静态分析_操作指南 LDRA Testbed软件静态分析_自动提取静态分析数据生成文档 LDRA Testbed软件静态分析_Jenkins持续集成_(1)自动进行静态分析的环境搭建 LDRA Testbed软件静态分析_Jenkins持续集成_(2)配置邮件自动发送静态分析结果 LDRA Testb…
阅读更多...
水经微图IOS版5.2.0发布

水经微图IOS版5.2.0发布

随时随地&#xff0c;微图一下&#xff01; 水经微图&#xff08;简称“微图”&#xff09;IOS新版已上线。 在该版本中主要新增图层树节点排序功能、常规&#xff08;矩形、圆、椭圆、扇形&#xff09;绘制功能、地形夸张等主要功能。 当前版本 当前版本号为&#xff1a;5…
阅读更多...
鹏哥C语言复习——数据存储

鹏哥C语言复习——数据存储

目录 版本差异&#xff1a; 数据类型&#xff1a; 进制表示&#xff1a; 大小端储存&#xff1a; 数据运算&#xff1a; 浮点型在内存中的存储&#xff1a; 版本差异&#xff1a; debug和release的区别&#xff1a; 在栈区开辟地址一般是先从高地址开辟 debug创建数组和单…
阅读更多...
Project Euler_Problem 172_Few Repeated Digits_动态规划

Project Euler_Problem 172_Few Repeated Digits_动态规划

原题目&#xff1a; 题目大意&#xff1a;18位数里头&#xff0c;有多少个数&#xff0c;对于每个数字0-9&#xff0c;在这18位里面出现均不超过3次 111222333444555666 布星~~ 112233445566778899 可以~~ 解题思路&#xff1a; 动态规划 代码: ll F[19][3000000];void …
阅读更多...
DedeCMS 未授权远程命令执行漏洞分析

DedeCMS 未授权远程命令执行漏洞分析

dedecms介绍 DedeCMS是国内专业的PHP网站内容管理系统-织梦内容管理系统&#xff0c;采用XML名字空间风格核心模板&#xff1a;模板全部使用文件形式保存&#xff0c;对用户设计模板、网站升级转移均提供很大的便利&#xff0c;健壮的模板标签为站长DIY自己的网站提供了强有力…
阅读更多...
springboot发送邮件

springboot发送邮件

很久之前就想写一个总结的&#xff0c;一直没写&#xff0c;今天刚好又碰见了发送邮箱验证码的需求&#xff0c;刚好记录一波 一.核心依赖如下&#xff1a; <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023