详解css的外边距margin的使用

 这篇文章详解css的外边距margin的使用

h2{margin:10px 0;}p{margin:20px 0;}......

这是一个标题

这是又一个标题

本例中,第一个h2的margin-bottom(10px),p的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。

语法:

margin:[ | | auto ]{1,4} | inherit

默认值:看每个独立属性

适用于:所有元素,除非 table | inline-table | table-caption 的表格类元素之外

继承性:无

立即学习“前端免费学习笔记(深入)”;

动画性:是

计算值:看每个独立属性

相关属性:[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left]

 

取值:

auto:水平(默认)书写模式下,margin-top/margin-bottom计算值为0,margin-left/margin-right取决于可用空间。详见:margin系列之keyword auto

: 用长度值来定义外补白。可以为负值

: 用百分比来定义外补白。水平(默认)书写模式下,参照其包含块 width进行计算,其它情况参照 height ,可以为负值

 

说明:

检索或设置对象四边的外延边距。

如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

如果只提供一个,将用于全部的四边。

如果提供两个,第一个用于上、下,第二个用于左、右。

如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。

外延边距始终透明。

某些相邻的margin会发生合并,我们称之为margin折叠:

h2{margin:10px 0;}p{margin:20px 0;}......

这是一个标题

这是又一个标题

本例中,第一个h2的margin-bottom(10px),p的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。

 

父元素与第一个/最后一个子元素 会合并 margin

以上就是详解css的外边距margin的使用的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608071.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:26:57
下一篇 2025年12月23日 21:27:30

相关推荐

  • 使用CSS制作简易3D效果旋转木马实例代码

    最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的。就练习了一下。开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转,就有了一简易的旋转木马效果。感兴趣的可以看一下…

    2025年12月23日
    000
  • 使用css改变下拉列表select框的默认样式介绍

    这篇文章使用css改变下拉列表select框的默认样式介绍 原理 原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。当然右侧的小箭头可以用伪元素before或者after来实现。 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了…

    好文分享 2025年12月23日
    000
  • 使用CSS实现Footer置底的五种方式

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。 方法一:将内容部分的margin-bottom设为负数 footer htm…

    2025年12月23日
    000
  • 移动端css单位之 “vh” & “vw”的分别介绍

    一、前言: 响应式web设计离不开百分比。但是,css百分比并不是所有的问题的最佳解决方案。css的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该怎么办? 二、“vh” & “vw”: vh:相对于视窗的高度:视窗高度…

    2025年12月23日
    000
  • css背景有关的属性详细介绍

    印象中css控制背景的就一个background,但是background是一个复合属性 它包括: background-color:背景颜色,css支持的颜色表示方法,都可以用 background-image:背景图片(url) background-repeat:背景是否重复(repeat、n…

    2025年12月23日 好文分享
    000
  • css超出2行部分省略号解决方法

    今天做东西,遇到了这个问题,百度后总结得到了这个结果。 首先,要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 立即学习“前端免费学习笔记(深入…

    好文分享 2025年12月23日
    000
  • CSS定位position使用介绍

    position选项来定义元素的定位属性,选项有5个可选值:static、relative、absolute、fixed、inherit 属性值为relative、absolute、fixed时top | left | right| bottom | z-index才能起作用。 static(默认值…

    好文分享 2025年12月23日
    000
  • 关于css的垂直水平居中六种方法分享

    总结了几种css居中实现的方式,注:*为常用方式,“wrap”为容器,“div”为要居中的元素。 *1.绝对定位,宽高都已知的情况下如下代码可实现,或者可以使用negative margins; .div { width: 200px; height: 200px; margin: auto; po…

    好文分享 2025年12月23日
    000
  • 详解css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下css中margin属性的两种特殊现象  1, 外边距的合并现象: 如果两个p上下排序,给上面一个p设置margin-bottom,给下面一个p设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个。  对于这种现象一般不用处理。 2,margin…

    好文分享 2025年12月23日
    000
  • 如何解决css文件失效的方法

    css都是正确的,链接也没有出错的话,为什么偏偏css样式不生效 Transitional类型:是指一种过渡类型,使用这种类型浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。这种是现在通用的方法,用dreamweaver创建网页时默认就是这种类型。aa…

    好文分享 2025年12月23日
    000
  • 使用css设置div背景颜色的方法介绍

    这篇文章主要介绍了css设置p背景颜色的方法,需要的朋友可以参考下 一、p标签内直接设置背景颜色 代码如下: 背景为黑色 p标签内设置背景色为黑色,字体颜色为白色 立即学习“前端免费学习笔记(深入)”; p标签内设置背景色截图 通过p标签内设置style设置背景色等CSS样式。 二、外部css设置p…

    2025年12月23日
    000
  • 使用css实现页面居中的方法介绍

    在网页制作的过程中,为方便读者的阅读,会把网页内容限定在一个较小的方框中,并居中显示,如何实现这一功能呢? 1)把正文放在一个 标签中,只要这个标签居中整个网页就居中了。 2)接下来要介绍一种方法:负边框,即 margin 的值为负 #text{ 立即学习“前端免费学习笔记(深入)”;     pa…

    好文分享 2025年12月23日
    000
  • 实现css文字飞入效果示例代码

    这篇文章实现css文字飞入效果示例代码 一、页面的主体布局 左右淡入的企业介绍 上海世茂集团企业招聘 世茂集团,是以房地产开发为主的国际化企业集群,房地产界领袖企业之一。 上面就不用说了吧~~~~就四句话布局就完成了~~~我实在太懒了,一个多余的美观性布局我都不愿意写QAQ,最直接的代码是为了方便我…

    好文分享 2025年12月23日
    000
  • 详解CSS属性值用法

    万维网联盟(w3c) 使用了一套特别的语法来定义 css 的属性值,能让所有的 css 属性都用。如果你曾看过 css 规范,你可能已经见过这套语法了。就像  border-image-slice  的语法 ,让我们看看: = [ | ]{1,4} && fill?如果你不知道这些符…

    2025年12月23日 好文分享
    000
  • 详解css中border-image的使用方法

    border-image-source 属性设置边框的图片的路径[none | ] p { border: 20px solid #000; border-image-source: url(border.png);} border-image-slice 属性图片边框向内偏移[ | ](1,4) …

    2025年12月23日
    000
  • 解析CSS3中nth-child与nth-of-type的区别

    css3中nth-child与nth-of-type的区别其实很简单::nth-of-type为什么要叫:nth-of-type?因为它是以”type”来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是…

    2025年12月23日 好文分享
    000
  • CSS常用字体属性:background-origin和background-clip介绍说明

    (一)常用的字体属性:       font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗       font-size:字体大小,单位可以为px或者%       font-family:字体族 比如说:微软雅黑       font-style:…

    好文分享 2025年12月23日
    000
  • CSS中的伪类与伪元素及二者间的区别说明

    这篇文章主要介绍了详解css中的伪类与伪元素及二者间的区别,实际上css3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,需要的朋友可以参考下 CSS伪类的概念及作用CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选…

    2025年12月23日 好文分享
    000
  • 使用CSS实现文字环绕图片效果

    这篇文章主要为大家详细介绍了css文字环绕图片遇到的问题及解决方法,感兴趣的小伙伴们可以参考一下 CSS实现文字环绕图片效果 文字环绕图片,在Word里只要click一下右键,调一下属性就可以了。但在HTML文档里就没有直接属性了。因此我们可以借助CSS来实现这一效果。 我们先设定float的参数,…

    2025年12月23日 好文分享
    000
  • 利用CSS中linear制作复杂的边框效果实例分析

    这篇文章主要介绍了利用css中linear制作复杂的边框效果实例分析的相关资料,利用linear-gradient属性制作绚丽的边框效果 网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码,大家可以在自己的电脑中查看效果: .box { margin: 80px …

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信