跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS Padding

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS Padding

This element has a padding of 70px.

Try it Yourself »

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left), and a shorthand property for setting all the padding properties in one declaration.

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

  • padding-top - sets the top padding of an element
  • padding-right - sets the right padding of an element
  • padding-bottom - sets the bottom padding of an element
  • padding-left - sets the left padding of an element

All the padding properties can have the following values:

  • length - specifies a padding in px, pt, cm, etc.
  • % - specifies a padding in % of the width of the containing element
  • inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

Example

Set different padding for all four sides of a <div> element:  

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
Try it Yourself »

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one declaration.

The padding property is a shorthand property for the following individual padding properties:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Here is how it works:

If the padding property has four values:

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

Example

Use the padding shorthand property with four values:

div {
  padding: 25px 50px 75px 100px;
}
Try it Yourself »

If the padding property has three values:

  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

Example

Use the padding shorthand property with three values: 

div {
  padding: 25px 50px 75px;
}
Try it Yourself »

If the padding property has two values:

  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

Example

Use the padding shorthand property with two values: 

div {
  padding: 25px 50px;
}
Try it Yourself »

If the padding property has one value:

  • padding: 25px;
    • all four paddings are 25px

Example

Use the padding shorthand property with one value: 

div {
  padding: 25px;
}
Try it Yourself »

More Examples

Set the left-padding property
This example demonstrates how to set the left padding of a <p> element.

Set the right-padding property
This example demonstrates how to set the right padding of a <p> element.

Set the top-padding property
This example demonstrates how to set the top padding of a <p> element.

Set the bottom-padding property
This example demonstrates how to set the bottom padding of a <p> element.


  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。