W3.CSS 填充


w3-填充-大

我有 12 像素的顶部和底部填充以及 24 像素的左侧和右侧填充。


W3.CSS 填充数字类

这个w3-填充-数字类向任何 HTML 元素添加顶部和底部填充:

定义
w3-填充-16 向元素添加 16px 顶部和底部填充
w3-填充-24 向元素添加 24px 顶部和底部填充
w3-填充-32 向元素添加 32px 顶部和底部填充
w3-填充-48 向元素添加 48px 顶部和底部填充
w3-填充-64 向元素添加 64px 顶部和底部填充

例子:

w3-填充-16

我有 16px 顶部和底部填充

w3-填充-24

我有 24px 顶部和底部填充

w3-填充-32

我有 32px 顶部和底部填充

w3-填充-48

我有 48px 顶部和底部填充

w3-填充-64

我有 64px 顶部和底部内边距

示例

<div class="w3-panel w3-padding-16">
  <p>I have 16px top and bottom padding.</p>
</div>
亲自试一试»


W3.CSS 填充尺寸类

这个w3-填充-尺寸类向任何 HTML 元素添加顶部、底部、右侧和左侧填充:

定义
w3-填充 添加 8px 顶部和底部以及 16px 左右内边距
w3-padding-小 添加 4px 顶部和底部以及 8px 左右内边距
w3-填充-大 添加 12px 顶部和底部以及 24px 左侧和右侧内边距

例子:

w3-padding-小

我有 4 像素的顶部和底部填充以及 8 像素的左侧和右侧填充。

w3-填充

我有 8 像素的顶部和底部填充以及 16 像素的左侧和右侧填充。

w3-填充-大

我有 12 像素的顶部和底部填充以及 24 像素的左侧和右侧填充。

示例

<div class="w3-panel w3-padding-large">
  <p>I have 12px top and bottom padding and 24px left and right padding.</p>
</div>
亲自试一试»