例を使用してCSSでパディングを実装する方法

この記事では、例を使用してCSSでパディングを実装する方法に関する詳細で包括的な知識を提供します。

パディングはの最も重要な側面の1つです そして 。この記事では、CSSでのパディングの重要性と使用法について次の順序で説明します。



CSSのパディングとは何ですか?

paddingプロパティを使用すると、要素のコンテンツテキストとその境界線の間に表示するスペースとスペースを指定できます。この属性の値は、長さ、パーセンテージ、または単語である必要があります。



Padding-in-CSS



値が継承される場合、親のパディングと同じパディングになります。ここでパーセンテージを使用する場合、パーセンテージは収容ボックスのものです。

パディングプロパティ

CSSのパディングの次のプロパティを使用して、リストを制御できます。それでも、主に次のプロパティを使用して、ボックスの両側のパディングに異なる値を設定することもできます。

  • パディング-下: 要素の下部のパディングを指定します。



  • パディングトップ: 要素の上部のパディングを指定します。

  • パディング-左: 要素の左側のパディングを指定します。

  • パディング-右: 要素の正しいパディングを指定します。

  • パディング: これは、以降のプロパティの省略形として機能します。

Padding-bottomプロパティ:

HTMLのスパンタグは何ですか

これは、要素の下部のパディングに設定されます。パーセンテージの長さの値を取ることができます。


これは段落指定の下部パディングです



これは、パーセンテージで下のパディングを指定した別の段落です

出力:

パディングトッププロパティ

このpadding-topプロパティは、要素の上部のパディングを設定します。これは、パーセンテージの長さの値を取ることができます。


これは段落指定の上部パディングです



これは、パーセンテージでトップパディングを指定した別の段落です

出力:

パディング左プロパティ

シェフと人形とは

このpadding-leftプロパティは、要素の左パディングを設定します。パーセンテージの長さの値を取ることができます。


これは、左パディングで指定された段落です



これは、パーセンテージで左パディングを指定した別の段落です

出力:

パディング権プロパティ

このpadding-rightプロパティは、要素の正しいパディングを設定します。パーセンテージの長さの値を取ることができます。


これは、右パディングで指定された段落です



これは、パーセンテージで右パディングを指定した別の段落です

出力:

パディングプロパティ

このパディングプロパティは、右、左、上、下のパディングを設定します。これは、パーセンテージの長さの値を取ることができます。


これらの4つのパディングはすべて20pxになります



上下のパディングは20pxになり、左右はドキュメントの全幅の10%になります



上と下のパディングは20px、右のパディングはドキュメントの全幅の3%、下のパディングと上のパディングは20pxになります

java system.exit(0)

出力:

これで、CSSでのパディングに関するこのすばらしい記事は終わりです。パディングを追加するさまざまな方法をご理解いただければ幸いです。

ウェブ開発について詳しく知りたい場合は、 Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service(S3)にデプロイする方法を学ぶのに役立ちます。

それでも興味がある場合質問がある場合は、この「CSSのパディング」ブログのコメントセクションに投稿してください。できるだけ早くご連絡いたします。