如何使用 CSS 在框内和框外包装文本？

在 Web 开发中，往往需要在文本周围添加样式，以便突出文本内容、调整版面布局等等。CSS 提供了多种方式来实现文本的包装。

在框内包装文本

我们使用 padding 属性来在框内包装文本。此属性用于控制元素的内容区域周围的空白区域大小。我们可以通过设置 padding 的值来控制元素内部文本的位置和外观。

/* 按顺序设置顶、右、底、左内边距 */
padding: 10px 20px 30px 40px;

上面的代码表示，从上往下的顺序对应了元素内四个方向的内边距大小。你也可以通过缩写方式设置 padding，比如：

/* 设置上下内边距为 10px，左右内边距为 20px */
padding: 10px 20px;

在框外包装文本

内边距会在内容周围创建一定的空白区域。但是如果你需要在元素外部包装文本，可以使用 margin 属性。此属性用于控制元素边框周围的空白。与 padding 类似，你可以按顺序或缩写方式设置 margin 的值。

/* 按顺序设置顶、右、底、左外边距 */
margin: 10px 20px 30px 40px;

/* 设置上下外边距为 10px，左右外边距为 20px */
margin: 10px 20px;

通过 padding 和 margin 属性的组合，我们可以为文本设置形状各异的包装。

需要注意的是，在使用这些属性时，应当考虑元素的盒子模型（box model），以及元素的位置、大小等因素。