CSSでpadding属性を使用する方法

Padding是比较常用CSS样式，我们可以利用padding样式来设置内边距，下面我们从基础语法到应用示范最后举一个小列子来给大家说一下padding样式如何使用，

padding语法结构与说明  

padding : +数值+单位 或 百分比数值

div{padding:5px}设置对象距离四边边距为5px间隔

同时可以单独设置左、右、上、下边距离发布设置

1、padding-left 设置对象距离左边的边距补白间隔

div{padding-left:5px}

对象内距离左边补白间距为5px

2、padding-right 设置对象距离右边的边距补白间隔

div{padding-right:5px}

对象内距离右边补白间距为5px

3、padding-top 设置对象距离上边的边距补白间隔

div{padding-top:5px}

对象内距离上边补白间距为5px

4、padding-bottom 设置对象距离下边的边距补白间隔

div{padding-bottom:5px}

对象内距离下边补白间距为5px

div css Padding说明

检索或设置对象四边的补丁边距。

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

如果只提供一个，将用于全部的四条边。

如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

Padding的值不能为负值。

Padding位于对象（边框）以内，或这样说padding样式是位于对象内的内容区域与边框之间。

padding设置四边用法案例 

为了对padding用法进一步了解，我们设置一个对象分别设置4边不同的padding补白间距，并且设置对象CSS宽度，css 高度、CSS边框属性样式。为了便于观察padding存在，我们设置padding-left（左）为20px,padding-right（右）为30px，padding-top（上）为40px，padding-bottom（下）为50px。

1、padding案例CSS代码

.div{ width:350px; height:80px; border:1px solid #00F; 

padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px} 

 

2、案例HTML代码

padding使用案例

4. ケースの概要

padding は、オブジェクト内の四辺の境界線とコンテンツ領域の間の間隔のスタイルを設定するために使用されるため、オブジェクト内の間隔を実現するには、css div + padding を使用できます。

3. パディングの省略形とケース

1. 4 辺すべてで同じパディングの省略形

4 辺のパディング設定が同じ場合、5px の場合、元の式は次のようになります:

padding -left:5px;padding-top:5px;padding-bottom:5px;

4 つのパディングの省略形。側面

は、2 番目のチュートリアルの 4 つの側面のさまざまなパディング値とまったく同じで、padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px

省略できます。 as:

Padding:40px 30px 50px 20px;

各値はスペースで区切られていることに注意してください

意味を説明してください

最初の40pxは「top」を表しますpadding-top:40px;

2番目の30pxは「right」を表します"padding-right:30px;

3番目の50pxは「下」を表しますpadding-bottom:50px;

4番目の20pxは「左」を表しますpadding-left:20px;

3. 左側と右側は同じです、ただし、上下の値が異なります。paddingの略称です

パディングが左右10px、上20px、下30pxの場合

一般的な書き方:

padding-left:10px ;padding-right:10px;padding-top:20px;padding-bottom:30px

省略形は次のとおりです:

Padding:20px 10px 30px;

前者の最初の 20px は、padding-top を表します。上部は 20px、

2番目の10pxはpadding-leftとpadding-rightを表し、左右は10pxです

3番目の30pxはpadding-bottomを表します: 30px

3つの辺は同じですが、1つの辺の値は4です。異なる

任意の 3 つの側面 同じ値でも異なる側面を省略できます。

EXP

パディングが上下10px、下20pxの場合、CSSスタイルは通常次のように記述されます

padding-left:10px;padding-right:10px;padding-top:10px;padding -bottom:20px

省略形は次のとおりです:

padding:10px;padding-bottom:20px

ここでのトリックは、ブラウザが上から下、左から右に読み取るということです。まず 4 つの側面を同じに設定し、次にもう一方の側面に異なるスタイル値を追加します。 extended読み取り：html圧縮最適化

4。 , 通常、オブジェクト内の上下左右のマージン間隔を設定するにはパディングを使用します。もちろん、先頭テキストのインデントが発生した場合は、CSS

text-indent

スタイルを使用できます。パディングを使用する場合は、パディングが幅と高さの両方を占めることに注意してください。合計の幅が 500 ピクセルで、左右に 10 ピクセルのパディング スタイルが設定されている場合、コンテンツ領域の幅は次のようになります。 480pxになります。同時に、スタイルを使用するときは、PADDING という略語の意味に注意してください。できるだけ CSS 略語を使用するようにしてください。パディングを使用する方法は他にもたくさんあります。 php 中国語 Web サイトに記事が掲載されました。

関連書籍:

HTML で p 段落の行の高さと行間隔を設定する方法

HTML5

タグの使用方法

HTML 文書型宣言の書き方

以上がCSSでpadding属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。