CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで各辺のパディングを個別に指定する方法

CSSでは、要素の各辺に対して個別にパディング（内側の余白）を設定できます。padding-top、padding-right、padding-bottom、padding-left の各プロパティを使うと、それぞれ上・右・下・左のパディングを個別に定義できます。

さらに、ショートハンドプロパティである padding を使用すれば、値を「上 → 右 → 下 → 左」の時計回りの順序で指定するだけで、同じ結果をより簡潔に実現できます。

構文

CSSのパディング関連プロパティの基本的な書式は以下の通りです。

Selector {
   padding-top: /*値*/
   padding-right: /*値*/
   padding-bottom: /*値*/
   padding-left: /*値*/
}

以下の例では、実際にリストやテキスト要素へパディングを適用したスタイリングを紹介します。

例1：span要素へのパディング適用

<!DOCTYPE html>
<html>
<head>
<style>
article {
   margin: 2em 1em;
   padding: 3%;
   background-color: plum;
   letter-spacing: 0.05em;
}
span {
   padding: 0 53%;
   border-right: dashed;
   background-image: linear-gradient(to right, lavenderblush, lightblue);
   font-size: 1.4em;
   font-style: italic;
}
</style>
</head>
<body>
<h2>Xamarinとは？</h2>
<article>
<span>Xamarinはサンフランシスコに拠点を置くソフトウェア企業です。Xamarinは.NET Frameworkを基盤として構築されています。</span> C#言語と.NETフレームワークを使用して、Android、iOS、Windows向けアプリケーションを開発できる商用ソフトウェア開発ツールを提供しています。
</article>
</body>
</html>

表示結果

CSSで各辺のパディングを個別に指定する方法

例2：各辺ごとに異なるパディングを指定

次の例では、padding-top、padding-bottom、padding-left、padding-right を使って、上下左右それぞれに異なる余白を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   max-width: 400px;
   padding-left: 30px;
   padding-top: 44px;
   padding-bottom: 60px;
   background-image: linear-gradient(to bottom, oldlace, lightblue);
   border: thin solid;
   text-align: center;
}
div > div {
   padding-right: 70px;
}
</style>
</head>
<body>
<h2>Apple製プログラミング言語「Swift」</h2>
<div>SwiftはApple Inc.がiOSおよびOS X向けに開発したプログラミング言語です。
<div>Swift 4は、Mac OSおよびiOSの既存のObj-Cシステムと同じランタイムを使用しており、そのためSwift 4のプログラムは、既存の多くのiOS 6やOS X 10.8プラットフォーム上でも動作します。
</div>
</div>
</body>
</html>

表示結果

CSSで各辺のパディングを個別に指定する方法

まとめ

このように、padding-top や padding-bottom などの個別プロパティを使えば、要素の特定の辺だけ余白を細かく調整できます。一方、4辺すべてをまとめて指定したい場合は、padding: 上 右 下 左; の形式でショートハンドを活用すると、コードがすっきりし保守性も向上します。用途に応じて両者を使い分けるとよいでしょう。

  1. CSSのマージン（margin）とパディング（padding）の使い方を徹底解説

    マージンとパディングとは？CSSにおけるマージン（margin）とは、HTML要素の外側にある余白のことです。マージンを設定するには、CSSのmarginプロパティを使用します。このプロパティにより、要素の周囲にどれだけのスペースを空けるかを定義できます。一方、パディング（padding）とは、要素の内側にある余白のことです。paddingプロパティを使用すると、要素のコンテンツとその境界線（ボーダー）との間に、どれだけのスペースを設けるかを指定できます。marginとpaddingの違いmarginは要素の「外側」に適用されるため、隣接する他の要素との距離を作ります。対してpaddingは要

  2. CSSでHTML動画や要素のアスペクト比を維持する方法【padding活用テクニック】

    Webページに動画や画像を埋め込む際、ウィンドウサイズが変わってもレイアウトが崩れないようにアスペクト比（縦横比）を維持したい場面は多くあります。実は、CSSのpaddingプロパティにパーセンテージ値を指定するだけで、要素のアスペクト比を簡単に維持できます。 このテクニックが機能する理由は、paddingにパーセンテージを指定した場合、その基準が親要素の「幅」になるという仕様によるものです。つまり、幅に応じて高さも連動して変化するため、縦横比が保たれるのです。 使用できるpaddingプロパティ padding-bottom：要素の下側の余白（パディング）を指定します。 padding-t