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>

代码运行结果如下所示:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

设计模式-外观模式(Facade)

1. 概念 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供了一个统一的接口&#xff0c;用于访问子系统中的一群接口。外观模式的主要目的是隐藏系统的复杂性&#xff0c;通过定义一个高层级的接口&#xff0c;使得子系统更容易被使用。…

秀米、135、蚂蚁编辑器如何为推文添加附件

秀米、135、蚂蚁编辑器作为第三方的公众号图文排版工具&#xff0c;给从事运营和编辑工作的同学提供了更多的排版选择。不同于公众号自家的编辑器&#xff0c;这些第三方编辑器脱离了微信的直接支持&#xff0c;在很多排版操作上&#xff0c;还是有很多操作不一样的地方。 公众…

UE C++ 学习

UBT&#xff08;虚幻编译工具&#xff08;UnrealBuildTool&#xff09;&#xff09;和UHT虚幻头工具&#xff08;UnrealHeaderTool&#xff09; UE有一组用于自动执行编译虚幻引擎过程的工具&#xff0c;包括 UBT和UHT&#xff08;以及其他工具&#xff09;。实现这一套工具的目…

R语言 多组堆砌图

目录 数据格式 普通绘图 添加比例 R语言 堆砌图_r语言堆砌图-CSDN博客 关键点在于数据转换步骤和数据比例计算步骤&#xff0c;然后个性化调整图。 ①data <- melt(dat, id.vars c("ID"))##根据分组变为长数据 ②#计算百分比## data2 <- ddply(data, …

Vue 3 中的哪些新特性对提升开发效率最有帮助?

Vue 3 引入了一系列新特性&#xff0c;旨在提升开发效率和改善开发体验。以下是一些对提升开发效率最有帮助的特性&#xff1a; Composition API: Composition API 允许开发者更灵活地组织代码&#xff0c;使得逻辑复用和维护变得更加容易。通过将相关功能的代码组织在一起&…

【Leetcode】2923. 找到冠军 I

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 一场比赛中共有 n n n 支队伍&#xff0c;按从 0 0 0 到 n − 1 n - 1 n−1 编号。 给你一个下标从 0 0 0 开始、大小为 n ∗ n n * n n∗n 的二维布尔矩阵 g r i d grid gr…

【cmake安装】研发环境搭建之cmake安装

背景 因为项目需求&#xff0c;需要家里的Win10 PC安装Ubuntu 20.04虚拟机并搭建编译环境&#xff0c;需要安装cmake编译环境 直接命令安装即可 sudo apt install cmake安装成功后&#xff1a; 3.16版本暂时也够用了

院子里种点什么树风水好呢?

植物本身是一个丰富的生活领域&#xff0c;有着强烈的视觉暗示。其实&#xff0c;在家中养植物&#xff0c;是有许多好处的&#xff0c;它不仅能够装点庭院的环境让家更美丽&#xff0c;还能调节室内的空气质量&#xff0c;对家人的运势也有着非常大的帮助。 不过&#xff0c;并…

向量数据库Chroma学习记录

一 简介 Chroma是一款AI开源向量数据库&#xff0c;用于快速构建基于LLM的应用&#xff0c;支持Python和Javascript语言。具备轻量化、快速安装等特点&#xff0c;可与Langchain、LlamaIndex等知名LLM框架组合使用。 二 基本用法 1 安装 安装方式非常简单&#xff0c;只需…

公司能监控员工电脑屏幕吗

公司能监控员工电脑屏幕吗&#xff1f; 当然可以&#xff01; 公司需要在工作时间去监控员工电脑的。 电脑属于公司财产&#xff0c;公司对于员工在工作期间的上网行为有监控的权利和职责&#xff0c;可以监控员工在工作期间的信息交流&#xff0c;并且对他们的上网行为进行…

为什么负载电流增加时电源电压会下降?

原文来自微信公众号&#xff1a;工程师看海&#xff0c;与我联系&#xff1a;chunhou0820 看海原创视频教程&#xff1a;《运放秘籍》 大家好&#xff0c;我是工程师看海。 在以前的文章中我总是提到当负载电流增加时&#xff0c;电源的输出电压会下降&#xff0c;很多同学在实…

【Java】第十五届蓝桥杯JavaB组第一道填空题

&#xff03;【Java】第十五届蓝桥杯JavaB组第一道填空题 大家好 我是寸铁&#x1f44a; 总结了一篇【Java】第十五届蓝桥杯JavaB组第一道填空题文章 喜欢的小伙伴可以点点关注 &#x1f49d; Java B组 第一道填空题题解如下:

云服务器租用一年、1个月优惠价格表,阿里/腾讯/京东/华为云

现在租一个服务器多少一个月&#xff1f;优惠价格低至3.8元1个月&#xff0c;租用一个月云服务器收费价格表&#xff1a;阿里云和腾讯云2核2G3M服务器优惠价格61元一年&#xff0c;折合一个月5元&#xff0c;京东云轻量云主机5.8元一个月&#xff0c;华为云服务器优惠价格3.8元…

vue中的treeselect下拉框显示不全的解决办法

:appendToBody“true” z-index“9000” 如图&#xff1a;页面中显示的下拉框信息展示不全&#xff0c;就看不见了&#xff0c;也没有滚动条 解决办法&#xff1a;在代码中添加属性【:appendToBody“true” z-index“9000”】 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺…

安全风险攻击面管理如何提升企业网络弹性?

从研究人员近些年的调查结果来看&#xff0c;威胁攻击者目前非常善于识别和利用最具有成本效益的网络入侵方法&#xff0c;这就凸显出了企业实施资产识别并了解其资产与整个资产相关的安全态势的迫切需要。 目前来看&#xff0c;为了在如此复杂的网络环境中受到最小程度上的网络…

12V降5V5A同步降压芯片WT6023A

12V降5V5A同步降压芯片WT6023A 在今日的产品介绍中&#xff0c;我们将重点讨论一款性能卓越的DC/DC转换器——WT6023A。此款转换器采用抖动频率模式控制架构&#xff0c;以高效、单片同步的方式执行降压操作。其设计能够持续承载达6安培的负载&#xff0c;并且展示出优异的线路…

1.8.5 卷积神经网络近年来在结构设计上的主要发展和变迁——Inception-v4 和 Inception-ResNet

1.8.5 卷积神经网络近年来在结构设计上的主要发展和变迁——Inception-v4 和 Inception-ResNet 前情回顾&#xff1a; 1.8.1 卷积神经网络近年来在结构设计上的主要发展和变迁——AlexNet 1.8.2 卷积神经网络近年来在结构设计上的主要发展和变迁——VGGNet 1.8.3 卷积神经网络近…

configmap里一堆\n怎么解决

1. 问题 在编辑configmap的时候偶尔后遇到configmap里的内容变为一坨&#xff0c;出现一堆\n的情况&#xff0c;如下图&#xff1a; 2. 原因 这个问题是configmap里有一些制表符&#xff08;Tab&#xff09;而不是四个空格(K8S的yaml文件只允许有空格)导致的。 Tips&#xf…

UVC摄像头在虚拟机Ubuntu16.04使用的正确姿势

前言&#xff1a;在Windows使用UVC摄像头是正常的&#xff0c;但在虚拟机Ubuntu中使用可以识别到&#xff0c; 但是一直没有数据出来&#xff0c;一度怀疑是摄像头不行&#xff0c;后来经过仔细研究&#xff0c;才发现是虚拟机usb设置有点问题。一、虚拟机USB设置USB 3.0,不然没…

Modern C++:提升开发效率的语法糖详解与实例

引言 Modern C&#xff0c;特指自C11以来的一系列标准更新&#xff0c;引入了大量旨在增强语言表达力、提高代码清晰度与开发效率的新特性。其中&#xff0c;被称为“语法糖”的便捷语法构造尤为引人注目。这些语法糖不仅简化了程序员的日常编码工作&#xff0c;减少了出错几率…