首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】盒子模型外边 ① ( 盒子模型外边设置 | 外边属性单独设置 | 外边属性复合写法 )

文章目录 一、盒子模型外边设置 1、外边属性单独设置 2、外边属性复合写法 一、盒子模型外边设置 ---- 盒子模型外边 Margin 用于控制 盒子 与 盒子 之间的距离 ; 1、外边属性单独设置...外边设置语法 : margin-left : 设置外边 ; margin-top : 设置 外边 ; margin-right : 设置外边 ; margin-bottom : 设置.../body> 展示效果 : 2、外边属性复合写法 外边复合写法 : 设置 1 ~ 4 个 值 , 单位 像素 px ; 设置 1 个值 : 设置 上下左右 外边 ; 设置 2 个值...: 设置 上下、左右 外边 ; 设置 3 个值 : 设置 、左右、下 外边 ; 设置 4 个值 : 设置 、右、下、左 外边 ; 代码示例 : <!...- 复合写法 - 、右、下、左 外边 */ margin: 20px 30px 40px 50px; } 外边

88920
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【CSS】盒子模型外边 ④ ( 元素默认的外边 | 清除元素默认的内外边 | 行内元素边设置 )

    文章目录 一、元素默认的外边 1、body 标签的默认外边 2、p 标签的默认外边 二、清除元素默认的内外边 1、清除方式 2、代码示例 三、行内元素边设置 一、元素默认的外边 ---..., 选中 body 标签 , 在 上图 右侧 红色矩形框 中 , 可以看到 body 标签 默认设置了 8 像素的外边 , 对应的调试模式中 橙色的 部分 ; body { display...---- 1、清除方式 使用 通配符选择器 设置 清除内外边 样式 , 将所有的标签元素 的 默认的内外边 全部设置为 0 ; 清除标签默认的内外边 样式 : * { /* 清除标签默认的内边...也消失了 ; 三、行内元素边设置 ---- 为 行内元素 设置 上下边 是无效的 , 建议只为 行内元素 设置 左右边 ; 如果为 行内元素 设置了上下边 , 可以在某些浏览器或者 web 应用场景出现适配问题...p 标签 默认外边 显示效果 : 按下 F12 键 , 进入 调试模式 , 选中 span 行内元素 , 为其设置 四个边 , 只有 左右边 50px

    2.4K10

    外边合并

    一:外边合并的场景 从3个简单的小例子来看外边合并: 1、父子合并 给h1加50px的margin,但实际h1和div的margin合并在一起了 ?...如下图detail和header外边合并之后,边为50px。 ? 3、自己和自己合并 当元素内容为空时,元素设置的上下margin会自己和自己合并。...如下面这个例子中,footer为空,设置了上下margin为30px,但实际footer的间隔只是30px,自己的上下margin合并了。 ?...二、阻止外边合并的方法 1、给父元素加border 如下图给header加上border之后,h1和header就没有产生外边合并了。 ? 2、给父元素加上padding ?...注意:相邻元素合并加padding和border都没有用 3、形成一个BFC 给header加了一个overflow:hidden,形成一个BFC,外边就不再合并。

    84020

    外边合并规则

    相邻的垂直外边会合并,除了2种特殊情况: 根元素盒的外边不合并 如果一个带有间隙的元素的外边与下外边相邻,它的外边会和紧挨着的兄弟(元素)的相邻外边合并,但合并后不会再和父级块的下外边合并...(in-flow)孩子的外边 盒的下外边与其下一个流内紧挨着的兄弟的外边 最后一个流内孩子的下外边与其height计算值为’auto’的父元素的下外边 盒的外边和下外边,要求该盒没有建立新的块格式化上下文...,并且’min-height’计算值为0,’height’计算值为0或’auto’,还没有流内孩子 看起来太长,我们简化条件,假设都是流内元素的话,那么: 父子:父元素外边与长子外边 兄弟:元素的下外边与右兄弟的外边...父子:幺儿的下外边与父元素的下外边 自身:0高“真空”元素的外边与下外边 P.S.这里的“真空”是指——把薯片抽成真空。...,除非该兄弟(元素)具有间隙 流内块级元素的外边会与它的第一个流内块级孩子的外边合并,条件是该元素没有上边框和内边,并且其孩子不具有间隙 一个’height’为’auto’并且’min-height

    1.3K30

    【CSS】margin 外边负值使用案例 ( 正常外边 | 使用外边负值实现边框重叠 | 重叠边框突出显示 )

    : 二、使用外边负值实现边框重叠 ---- 使用外边负值实现边框重叠 , 设置左侧 -1 像素外边 , 由于 浮动元素 都是紧贴在一起的 , 设置 -1 像素外边 就会在紧贴的基础 向左...1 像素边框 */ border: 1px solid black; /* 设置左侧 -1 像素外边 由于 浮动元素 都是紧贴在一起的 设置 -1 像素外边...就会在紧贴的基础 向左 1 像素*/ margin-left: -1px; /* 设置上方 -1 像素外边 */ margin-top: -1px; } ...就会在紧贴的基础 向左 1 像素*/ margin-left: -1px; /* 设置上方 -1 像素外边 */ margin-top: -1px; } /* 鼠标经过...就会在紧贴的基础 向左 1 像素*/ margin-left: -1px; /* 设置上方 -1 像素外边 */ margin-top: -1px; } /* 鼠标经过

    1.2K20

    【CSS】盒子模型外边 ⑤ ( 模型盒子垂直外边的合并 - 塌陷 | 相邻模型盒子垂直外边合并 | 嵌套模型盒子垂直外边合并 )

    文章目录 一、相邻模型盒子垂直外边合并 - 塌陷 1、外边塌陷现象说明 2、代码示例 - 塌陷效果 二、嵌套模型盒子垂直外边合并 - 塌陷 1、外边塌陷现象说明 2、代码示例 - 塌陷效果...: 上面的 模型盒子 设置了 下外边 margin-bottom , 下面的 模型盒子 设置外边 margin-top , 这两个 模型盒子 之间的 垂直间距 不是 两个边之和 = margin-bottom...: 设置上下相邻的 模型盒子 时 , 只给一个设置 上下边 , 不要都设置 ; 2、代码示例 - 塌陷效果 下面的示例中 , div1 设置了 下外边 100 像素 , div2 设置外边...- 塌陷 ---- 1、外边塌陷现象说明 嵌套 的 模型盒子 中 , 如果出现下面的情况 : 父元素 没有 内边 和 边框 父元素 和 子元素 都设置外边 , 则会出现 父元素 外边...与 子元素 外边 合并的情况 , 合并后的 外边为 二者之间 较大的值 ; 推荐解决方案 : 为 父元素 设置 边框 或 内边 , 不要让 两个外边 互相接触 ; 为 父元素 添加 overflow

    1.1K30

    CSS基础-盒模型:边框、内边外边

    边框(Border) 边框围绕在内容区和内边之外,可以设置宽度、样式和颜色。 易错点:边框影响元素尺寸,导致布局错位。...外边(Margin) 外边是元素与其他元素之间的空白区域,可以用来控制元素间的距离。 易错点:外边折叠导致布局混乱。....margin-demo { margin: 10px; /* 四个方向外边均为10px */ margin-top: 20px; /* 仅顶部外边为20px */ } 当上下相邻的外边相遇时...响应式设计中的挑战:在不同设备,盒模型的尺寸可能需要调整。使用媒体查询和相对单位(如%,em,rem)来实现灵活的布局调整。...确保四个角的圆角半径相等,或根据需要精确设置每个角。 示例代码 下面是一个综合运用盒模型各部分属性的示例: <!

    15310

    HarmonyOS实战—组件的外边和内边

    组件的位置属性,分为:内边外边 [在这里插入图片描述] 1....外边 表示组件跟外部其他组件的边 [在这里插入图片描述] [在这里插入图片描述] [在这里插入图片描述] 案例: 如果只设置 margin ,就会把上下左右都给设置了,这是一个整体的设置。...] 外边小节: 组件边框外侧距离其他组件的距离。...内边 组件边框内侧跟文本之间的间距 [在这里插入图片描述] [在这里插入图片描述] 一般设置内边和左内边就行了,因为设置了这两个,就可以确定文本的位置了 [在这里插入图片描述] 利用内边就可以调整组件内部文本的位置...把第二个文本的内边设置为:ohos:top_padding="20vp" [在这里插入图片描述] 内边小节: 组件边框内侧距离内部文字的距离。

    1.6K20

    CSS--外边合并的问题

    当一个元素出现在另一个元素上面时,第一个元素的下外边与第二个元素的外边会发生合并。...请看下图: image.png 当一个元素包含在另一个元素中时(假设没有内边或边框把外边分隔开),它们的和/或下外边也会发生合并。...外边合并初看上去可能有点奇怪,但是实际,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的外边。...如果没有外边合并,后续所有段落之间的外边都将是相邻外边和下外边的和。这意味着段落之间的空间是页面顶部的两倍。...如果发生外边合并,段落之间的外边和下外边就合并在一起,这样各处的距离就一致了。 image.png 注释: 只有普通文档流中块框的垂直外边才会发生外边合并。

    1.3K20

    原生JavaScript获取元素的margin外边

    最近想找一个可以获取元素高度(包括外边margin)的方法,原生JS的实现方法一直没有找到,不过有一个方法可以获取元素的边,记录一下: 语法是(获取元素的属性值): getComputedStyle...my_div = document.getElementById("myDiv"); let style = window.getComputedStyle(my_div, null); 获取元素的上边... getComputedStyle(div, null);     alert(computedStyle.marginTop); 为了实现IE和火狐、谷歌的兼容,JS...computedStyle = div.currentStyle;//兼容IE的写法     }     alert(computedStyle.marginTop); 这样就能弹出 div 的上边了...而不同点就是: element.style 读取的只是元素的内联样式,即写在元素的 style 属性的样式;而 getComputedStyle 读取的样式是最终样式,包括了内联样式、嵌入样式和外部样式

    9.4K10

    行内元素内外边探究:为何span设置上下margin和padding不起效

    一直以为行内元素设置外边会不起效,之前也没有具体的去实验,只是在需要设置 margin 或者 padding 的时候给元素设置一个 display: inline-block; 就得了。 ?...原来 span 标签默认的不是只能设置左右边,还有更有意思的现象。 我给 span 标签设置了 10px 的内边外边,并设置了背景色,外面嵌套一个 p 标签。...我又给外部容器设置了一个外边,这样内边就显示出来了。 ?...原来 span 等行内元素是可以设置内边 padding 的,只不过元素本身无法把父元素撑开,看上去就是设置的 padding 上下边不起效了,而 margin 就只能设置 span 的左右边。...;         background: #F0DE7D;         line-height: 20px;     } 声明:本文由w3h5原创,转载请注明出处:《行内元素内外边探究

    8K30

    wxss学习系列《二》尺寸(Dimension),外边(margin)和内边(padding)

    外边(margin)和内边(padding) 说到边,那这个基本跟Android里的概念差不多,先来看一个图吧,(虽然标注的丑了点,不过那不是重点) ?...一.margin:外边设置对象四边的外延边。 margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四个参数值,将按、右、下、左的顺序作用于四边。...某些相邻的margin会发生合并,称之为margin折叠,具体的现象就如果两个块级元素都设置了margin,那取两者之间的最大值做为两个元素的外边。...二.padding:内边设置对象四边的内部边。...三.margin-top,margin-right,margin-bottom,margin-left对应的分别是右下左外边的距离,可取值:auto/数值/百分比。

    1.9K60

    CSS篇-面试题4-外边问题

    两个 float 的盒子,都是左浮动,外边问题 两个float的盒子,都是左浮动,盒子 A 的margin-right为 100px,盒子 B 的margin-left为 200px,问盒子 A 与盒子...height: 100px; float: left; // 两个盒子都浮动 } .box-a { background: pink; margin-right: 100px; // 盒子A右外边...100px } .box-b { background: #abcdef; margin-left: 200px; // 盒子B左外边 } 具体测试结果 ?...答案:A-B 之间的间距是 300px 结论:当元素横向方向外边时,不会出现外边迭代的问题 外边叠加的问题 两个普通的盒子,盒子 A 的margin-bottom为100px,盒子 B 的margin-top...答案: A-B 之间的间距是200px 结论:当元素在垂直方向,两个相邻的元素之间增加上下外边时,会出现外边的叠加

    68120

    【CSS】使用绝对定位 浮动解决外边塌陷问题 ( 为父容器 子元素设置内边 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

    一、外边塌陷描述 ---- 在 标准流的父盒子 中 , 添加一个 标准流子盒子 ; 如果 子盒子设置 100 像素的外边 , 父盒子也会被带下来 , 这就是外边塌陷 ; 下面的示例 1 中 ,...父盒子 和 子盒子 没有添加任何外边 , 没有塌陷 ; 示例 2 中 , 为子盒子设置外边 , 结果将 父盒子也带下来了 ; 1、没有塌陷的情况 代码示例 : <!...在子盒子中设置了 100 像素的外边 , 出现了外边塌陷的情况 ; /* 子盒子添加上外边 出现塌陷情况 */ margin-top: 100px; 代码示例 : <!...- 为子元素设置浮动 ---- 为子元素设置浮动 , 可以解决 外边 塌陷问题 ; 代码示例 : <!...- 为子元素设置绝对定位 ---- 为子元素设置绝对定位 , 可以解决 外边 塌陷问题 ; 代码示例 : <!

    1.3K20
    领券