CSSでボタンやアイコン内の間隔を調整！パディングのコツを初心者向け解説

パディングでアイコンやボタン内の間隔を調整するコツ

先生と生徒の会話形式で理解しよう

生徒

「先生、ボタンの中の文字とアイコンの間をもう少し広げたいんですが、どうすればいいですか？」

先生

「それなら、パディングを調整すると簡単に間隔を変えられます。」

生徒

「パディングって何ですか？」

先生

「パディングとは、ボックスの内側の余白のことです。ボタンやアイコンの中の文字や画像とボーダーの間に空間を作るために使います。」

生徒

「なるほど、じゃあ文字やアイコンが窮屈にならないようにできるんですね。」

先生

「その通りです。実際に使うときは、上下左右のパディングを調整して、見やすいボタンデザインを作るのがコツです。」

1. パディングの基本と「ボックスモデル」の仕組み

CSSでレイアウトを整える際、最も重要なのが「ボックスモデル」という考え方です。Webサイト上のすべての要素（文字や画像など）は、実は目に見えない「四角い箱」に包まれています。この箱は、内側から順に以下の4つの層で構成されています。

コンテンツ (Content)： 文字や画像そのものが入るエリア
パディング (Padding)： コンテンツと境界線の間にある「内側の余白」
ボーダー (Border)： 要素の枠線
マージン (Margin)： 枠線の外側にある、隣の要素との「外側の余白」

例えば、ギフトボックスをイメージしてください。中身の商品が「コンテンツ」、商品を保護するためのクッション材が「パディング」、ギフト箱の壁が「ボーダー」にあたります。パディングを適切に設定することで、文字が枠線に張り付かず、読みやすく高級感のあるデザインになります。

まずは、パディングの有無でどれだけ見た目が変わるか、プログラミングが初めての方でも分かりやすい以下のコードで比較してみましょう。


<style>
    /* パディングがない場合（文字が枠にぶつかって窮屈） */
    .box-no-padding {
        border: 2px solid #ff4444;
        background-color: #ffebee;
        display: inline-block;
        margin-bottom: 20px;
    }

    /* パディングがある場合（文字の周りに空間がありスッキリ） */
    .box-with-padding {
        border: 2px solid #00c851;
        background-color: #e8f5e9;
        display: inline-block;
        padding: 20px; /* 上下左右に20pxの余白を追加 */
    }
</style>

<div class="box-no-padding">パディングなし：窮屈で見づらい</div>
<br>
<div class="box-with-padding">パディングあり：ゆとりがあって見やすい！</div>

ブラウザ表示

このように、paddingプロパティに数値を指定するだけで、要素の内側に余白が生まれます。指定する数値（px）が大きくなるほど、コンテンツと枠線の距離が広がり、ボタンやボックス全体が大きく、そして美しく見えるようになります。この感覚を掴むことが、脱・初心者への第一歩です。

2. パディングを使ったボタン内の文字とアイコンの間隔調整

ボタンの中にアイコンと文字を配置するとき、パディングを使うと見やすく整ったレイアウトになります。上下左右のパディングを調整することで、ボタン全体のサイズや見た目も変わります。


<style>
    .icon-button {
        display: inline-flex;       /* アイコンと文字を横並び */
        align-items: center;        /* 垂直方向を中央揃え */
        padding: 10px 20px;         /* 上下10px、左右20pxの余白 */
        border: 2px solid #007BFF;  /* ボタンの境界線 */
        border-radius: 5px;         /* 角を丸くする */
        background-color: #E3F2FD;  /* 背景色 */
        font-size: 16px;
        text-decoration: none;
        color: #007BFF;
    }
    .icon-button i {
        margin-right: 8px;          /* アイコンと文字の間隔 */
    }
</style>

<a href="#" class="icon-button">
    <i class="bi bi-star-fill"></i> お気に入り
</a>

ブラウザ表示

この例では、ボタンの上下に10px、左右に20pxのパディングを設定しています。アイコンと文字の間にはmargin-rightで8pxの空白を作っています。こうすることで、文字とアイコンがくっつかず、ボタン全体も見やすくなります。

3. パディングでボタンの高さや幅を調整するコツ

パディングを調整すると、ボタンの高さや幅を簡単にコントロールできます。上下のパディングを増やすとボタンが縦に大きくなり、左右のパディングを増やすと横幅が広がります。これにより、クリックしやすい大きさのボタンを作れます。


<style>
    .large-button {
        padding: 15px 30px;         /* 上下15px、左右30px */
        border: 2px solid #28A745;
        border-radius: 8px;
        background-color: #DFF0D8;
        color: #28A745;
        font-size: 18px;
        text-align: center;
        display: inline-block;
    }
</style>

<button class="large-button">
    申し込む
</button>

ブラウザ表示

このボタンでは、パディングを大きくすることで文字がゆったり配置され、押しやすくなっています。ボタンの見た目が整うだけでなく、ユーザビリティも向上します。

4. アイコンと文字の間隔をさらに調整する方法

アイコンと文字の間隔は、パディングだけでなく、アイコン要素にmarginを追加する方法もあります。これにより、ボタン全体の余白とアイコンの間隔を別々に管理できます。


<style>
    .button-with-icon {
        display: inline-flex;
        align-items: center;
        padding: 12px 25px;
        border: 2px solid #FFC107;
        border-radius: 6px;
        background-color: #FFF8E1;
        color: #FFC107;
        font-weight: bold;
        text-decoration: none;
    }
    .button-with-icon i {
        margin-right: 10px;  /* アイコンと文字の間隔 */
    }
</style>

<a href="#" class="button-with-icon">
    <i class="bi bi-cart-fill"></i> カートに追加
</a>

ブラウザ表示

この方法を使うと、パディングでボタン全体の余白を調整しつつ、アイコンと文字の間隔を個別に設定できます。これにより、デザインの自由度が高くなります。