Margin 塌陷（Collapsing）：父子元素与相邻兄弟元素的垂直外边距合并规则 大家好，今天我们来深入探讨CSS中一个常见但又容易让人困惑的概念——Margin 塌陷（Collapsing）。Margin 塌陷是指在特定情况下，相邻的垂直方向上的外边距会合并成一个单一的外边距，而不是像预期那样叠加。理解Margin 塌陷对于精确控制页面布局至关重要。 一、Margin 塌陷的定义与情景 Margin 塌陷主要发生在以下三种情景中： 父元素与第一个/最后一个子元素： 如果一个父元素没有 border、padding、inline content（例如文本或行内元素）分隔其 margin-top 与第一个子元素的 margin-top，或者其 margin-bottom 与最后一个子元素的 margin-bottom，那么父元素和子元素的相应外边距会发生塌陷。 相邻的兄弟元素： 当两个相邻的兄弟元素在垂直方向上都设置了外边距时，它们之间的外边距会塌陷。 空的块级元素： 如果一个块级元素没有 border、padding、inline content、height、min-heigh …
页面盒模型：`@page` 规则中的边距框（Margin Boxes）与生成内容
页面盒模型：@page 规则中的边距框（Margin Boxes）与生成内容 大家好，今天我们来深入探讨 CSS 页面盒模型中一个经常被忽略但功能强大的部分：@page 规则中的边距框（Margin Boxes）以及如何利用它们生成内容。 在 Web 开发中，我们通常关注的是网页在浏览器中的呈现。但是，CSS 也为打印媒体提供了强大的支持。@page 规则允许我们控制打印页面的布局和外观，而边距框是 @page 规则的核心组件，让我们可以在页面的边缘区域添加和控制内容。 1. 页面盒模型回顾 在深入边距框之前，我们先简单回顾一下 CSS 盒模型。标准的 CSS 盒模型包括以下几个部分： Content（内容区域）： 用于显示实际内容，例如文本、图像等。 Padding（内边距）： 内容区域周围的空白区域，位于内容区域和边框之间。 Border（边框）： 围绕内边距和内容区域的线条。 Margin（外边距）： 围绕边框的空白区域，用于与其他元素分隔。 @page 规则下的页面盒模型与此类似，但它是针对整个打印页面而言的。 2. @page 规则 @page 规则用于定义打印页面的样式。它 …
**CSS** `shape-margin`：文字与浮动元素间的精确外边距
CSS shape-margin：让文字跳支华尔兹，与浮动元素保持优雅距离 各位前端的魔法师们，有没有遇到过这种抓狂的时刻：你精心设计了一个漂亮的图文混排，图片傲娇地浮动在左边，文字却像打了鸡血一样，恨不得直接糊到图片脸上，毫无美感可言！简直是破坏美学，让人想挠墙。 别担心，今天我们就来聊聊 CSS 里的一个“小而美”的属性：shape-margin。它就像一个优雅的舞蹈老师，能让你的文字和浮动元素跳一支曼妙的华尔兹，保持恰到好处的距离，让整个页面充满和谐之美。 什么是 shape-margin？ 简单来说，shape-margin 就是用来定义浮动元素周围形状区域的外边距的。注意，这里说的是“形状区域”，而不是简单的矩形边框。这意味着，即使你的浮动元素是不规则形状，shape-margin 也能完美地控制文字与它的距离，而不是仅仅围绕它的矩形边界。 你可以把它想象成在浮动元素周围画了一圈“安全距离”，文字只能在这个距离之外活动，避免“贴脸”的尴尬。 为什么要用 shape-margin？ 你可能会说，直接用 margin 不行吗？ 当然可以，但效果往往差强人意。margin 是针对整 …