html･CSSで横並びボタンの間隔･隙間を調整する方法

フォームなどで「戻る」「送信」のようにボタンが並んでいることがあります。しかし、CSSで調整しないと間隔がなく見にくいです。

html･CSSで横並びボタンの間隔･隙間を調整する方法を解説します。

関連記事も参考にしてください。

【現状】間隔のないボタン

<input type="button" value="戻る"><input type="button" value="送信">

inputのbuttonが横に並ぶと間隔がありません。この間隔をあけましょう。

なお、今回はボタンのデザインは考えないものとします。

【方法1】marginで間隔をあける

<style>
.example input:first-of-type{
    margin-right: 100px;
}
.example{
    text-align: center;
}
</style>
<div class="example">
    <input type="button" value="戻る"><input type="button" value="送信">
</div>

marginは要素の外側の間隔を指定できるCSSです。

やりたいことは「一つ目のボタンの右に○○pxの隙間をいれる」ことです。

「一つ目のボタン」が「input:first-of-type」です。

「右に○○pxの隙間をいれる」は「margin-right: ○○px」です。

ついでに親要素に「text-align: center」を指定して中央寄せにしています。

1つめのボタンと2つめのボタンを常に一定にしたい場合便利ですが、スマホ幅になるなどで改行されたとき崩れてしまいます。

そんなときは下記「flex」を使った方法にしましょう。

【方法2】flexとjustify-contentで間隔をあける

<style>
.example2{
    display: flex;
    justify-content:space-around;
</style>
<div class="example2">
    <input type="button" value="戻る"><input type="button" value="送信">
</div>

display: flexは子要素の位置調整ができるCSSです。

justify-contentはflexとセットで使い、横方向の調節をするCSSです。

justify-content:space-aroundは両端の隙間もありつつ、ボタン同士の間隔をあけることができます。

justify-content:space-betweenは両端の隙間をなくし、ボタンを両端にすることができます。

justify-contentは数値を指定しない、つまり自動計算であるためスマホ幅になっても崩れないのが特徴です。

justify-contentだけでは不服な場合、paddingやmarginを使って細かい調整をしましょう。

【まとめ】横並びボタンの間隔･隙間を調整する方法

【方法1】marginで間隔をあける

単純に済ませたいならmarginで間隔をあけましょう。

【方法2】flexとjustify-contentで間隔をあける

スマホ対応や細かい調整などを考えるならこちら。

以上、html･CSSで横並びボタンの間隔･隙間を調整する方法でした。