`

CSS内边距和外边距

css 
阅读更多
(一)内边距

CSS padding 属性定义内边距,即边框与元素内容之间的空白区域
padding 属性接受长度值或百分比值,但不允许使用负值

{单边内边距属性}
可以依次表达,也可以按照上右下左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:例如h1 {padding: 10px 0.25cm 2px 20%;}等效于
h1 {
  padding-top: 10px;
  padding-right: 0.25cm;
  padding-bottom: 2px;
  padding-left: 20%;
  }

{内边距的百分比数值}
百分数值是相对于其父元素的 width 计算,如果父元素的 width 改变,它们也会改变。

(二)外边距

围绕在元素边框的空白区域是外边距。设置外边距会使得文本在自己的背景里空出来。
而内边距是带着文本背景一块偏离,空出高层空白

{CSS margin 属性}
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em
与内边距的设置相同,也可以按照上右下左的顺序分别设置各边的外边距
h1 {margin : 10px 0px 15px 5px;}==margin: top right bottom left

{单边外边距属性}
可以使用单边外边距属性为元素单边上的外边距设置值
p {margin: 20px 20px 20px 20px; }等同于
p {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  }

{值复制}
按照上右下左的顺序,CSS 定义了一些规则,允许为外边距指定少于 4 个值
①如果缺少左外边距的值,则使用右外边距的值
②如果缺少下外边距的值,则使用上外边距的值
③如果缺少右外边距的值,则使用上外边距的值


分享到:
评论

相关推荐

    CSS:掌握内边距与外边距的运用.docx

    CSS:掌握内边距与外边距的运用.docx

    Css中内边距、边框和外边距的关系.docx

    在CSS(层叠样式表)中,内边距(Padding)、边框(Border)和外边距(Margin)是布局和设计网页时不可或缺的概念。它们共同决定了元素在页面上的显示方式以及元素之间的空间关系。 首先,元素框的内部是内容区...

    外边距+内边距

    在网页布局中,`margin`(外边距)和`padding`(内边距)是非常重要的概念。它们主要用于控制元素与其周围元素之间的空间,是CSS中最常用也是最基本的属性之一。接下来,我们将详细探讨这两种属性的特点、用法及其在...

    web开发中CSS内边距介绍.docx

    Web 开发中 CSS 内边距介绍 在 Web 开发中,CSS 内边距(padding)是指元素边框与元素内容之间的空白区域。 CSS padding 属性定义...CSS 内边距属性可以灵活地控制元素的内边距,提高 Web 페이지的美观性和用户体验。

    css控制边界与边框示例(内边距、外边距使用方法)

    Css 中有两种边界:内边距(padding)和外边距(margin)。 1. 内边距(padding) 内边距是指元素内容与边界之间的空隙,通过内边距,可以增强元素的可读性和美观性。Css 中可以使用 padding 属性来设置内边距,...

    盒模型的介绍,以及margin(外边距)padding(内边距)的使用.zip

    在HTML和CSS中,每个元素都可以被视为一个矩形的“盒子”,包含内容、内边距、边框和外边距。理解盒模型有助于精确控制元素的大小和位置。 首先,我们来探讨盒子模型的基本组成部分: 1. **内容区域(Content)**...

    CSS-day03.pptx

    CSS 盒子模型详解 ...CSS 盒子模型是网页布局的基础,了解盒子模型的组成、边框、内边距和外边距等概念对于网页布局和美工的设计至关重要。本文对盒子模型的详细解释和应用可以帮助读者更好地理解和使用盒子模型。

    HTML5&CSS3网页制作:边距属性.pptx

    在这个主题中,我们将专注于 CSS3 中的边距属性,包括内边距(padding)和外边距(margin),它们对于创建整洁、有层次感的网页布局至关重要。 首先,内边距(padding)是元素内容与边框之间的空间,用于在内容和...

    DIV+CSS创建网页-边距属性.pptx

    在本讲座中,我们聚焦于使用DIV+CSS创建网页时涉及到的边距属性,包括内边距(padding)和外边距(margin),以及CSS3的box-shadow属性和box-sizing属性。 内边距(padding)是元素内容区域与边框之间的空间。CSS...

    第十一课 css边距与边框-011

    边距指的是元素边框与其他元素或页面边缘之间的空间,分为内边距(padding)和外边距(margin)。 内边距(padding)是边框与内容之间的距离,用于调整元素内部的空间。例如: ```css h1 { padding: 10px; /* ...

    HTML-第七章-CSS盒子模型+排版.pdf

    盒子模型由 content(内容)、border(边框)、padding(内边距)和 margin(外边距)组成。 在盒子模型中,content 是盒子的主要内容,border 是盒子的边框,padding 是盒子边框和内容之间的空白区域,margin 是...

    CSS布局负边距

    总之,掌握负边距的用法,可以让我们在进行CSS布局时有更多的灵活性和控制能力,从而制作出更加精细和符合设计需求的网页界面。对于前端开发者来说,理解并运用负边距是提升布局技能的一个重要方面。

    CSS外边距合并代码

    深入理解CSS的盒模型(Box Model)也有助于更好地掌握外边距合并的工作原理,盒模型包括元素的内容区(content)、内边距(padding)、边框(border)以及外边距(margin),这四个部分共同决定了元素的总尺寸和位置...

    css基础3-盒子模型

    * 盒子模型的应用:可以用于设置盒子的边框、内边距、外边距等样式 边框、内边距、外边距 边框、内边距、外边距是盒子模型的三个重要组成部分。 * 边框(border):是盒子模型的边框区域,可以设置边框的宽度、...

    CSS 框模型概述word文档

    CSS 框模型是网页布局的基础,它定义了网页元素(元素)在页面上的空间占用方式,包括内容区域、内边距、边框和外边距。理解这一概念对于精确控制网页元素的显示至关重要。 首先,元素的最核心部分是内容区域...

    外边距折叠1

    通常,子元素的上外边距不会影响到父元素,除非父元素没有内边距(Padding)或边框(Border)。当父元素没有`padding-top`或`border-top`时,子元素的上外边距会“穿透”父元素,使得父元素的顶部外边距相当于子元素...

    css框模型概述及css边框.docx

    CSS框模型是网页布局的基础,它定义了网页元素如何占据空间,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。内容是元素实际显示的信息,内边距则提供了元素内容与边框之间的空间,通常用于...

    CSS3背景、边框和边距相关属性演示案例

    在CSS3中,背景、边框和边距是网页设计中的关键元素,它们极大地影响了网页的视觉效果和用户体验。本篇文章将详细讲解这些概念,并通过具体的案例来展示它们的应用。 首先,我们来探讨CSS3的背景属性。背景属性允许...

    CSS模仿遥控器按钮

    6. CSS内边距和外边距:为了控制按钮之间的间距以及按钮与容器边缘的间隔,需要使用padding和margin属性。 7. 文字旋转:为了在按钮上显示加号(+)和减号(-),使用了transform属性配合rotate函数对文字进行旋转...

Global site tag (gtag.js) - Google Analytics