ここから本文です

HTML CSSでpaddingとmarginの使い分けが永遠にわからないんですけど

アバター

ID非公開さん

2020/5/1813:33:56

HTML CSSでpaddingとmarginの使い分けが永遠にわからないんですけど

閲覧数:
29
回答数:
5

違反報告

回答

1〜5件/5件中

並び替え:回答日時の
新しい順
|古い順

不適切な内容が含まれている可能性があるため、非表示になっています。

投稿内容に関する注意

aso********さん

編集あり2020/5/2418:58:14

要素の特性知らないと、使いこなせないのがCSS。
まずは、インラインとブロックから勉強しなおせ。
インラインは、上下のpaddingは効かないと忠告する!!
だったら、インライン要素のブロック、または、ブロック要素で編集しろ!
ここが、解れば理解している。

本気で、CSSを使いこなせる人材のみ行き着く、
クライアントのアートスクリプト、頑張れば、この領域に行けますよ。
CSSを使いこなせないと、作れませんから、位置とDOMの関係を使いこなせない為!!頑張ってみて下さい!!
クライアントエンジニアとは、これが出来て一人前です!
S級ランクは、これが出来ます。
アートスクリプトです、座標や位置を数式で表し、サーバを返して表現出来ます。
数式をプログラムとして、表現出来ます。
下のレベルは、出来ません。だから、クライアントエンジニアをバカにします。
CSSをバカにする連中に、言ってやればいい。
君らには、一生来れない領域があると。

1人月の単価、60万以上は、くだらないね。

アバター

ID非公開さん

2020/5/2417:58:43

ツイッターで参考になりそうな投稿がありました。
https://twitter.com/shun_webdesign/status/1260163045902258176

paddingは自分の体の周りについている脂肪です。物体から外枠までの距離を示す。

marginは人物と人物の間の距離。物体の外枠から他の物体の外枠まで。

どちらを使うかは「その外枠をどう表現したいか」ということです。異論はあるかもしれませんが。

あと、外枠を描写しないのなら見た目同じですが、実際は重なり合うマージンは相殺されるので少し変わります。

dve********さん

2020/5/2011:11:52

paddingは、要素の中の余白
marginは、要素の外の余白を指定します。
borderを指定した要素だと違いがわかりやすいです。

例えばborderを指定したp要素の場合、
paddingを指定すると中に余白ができて文字が移動するのに対し、
marginを指定すると外に余白ができ、要素ごと移動します。

<p style=“border:solid 1px black;margin:5px;”>test</p>
<p style=“border:solid 1px black;padding:5px;”>test</p>
このコードで見てみてください。

使い分けとしては、要素ごと移動する際はmarginを、要素の中身を移動する際はpaddingを使う感じです。

プロフィール画像

カテゴリマスター

oishii_mahouさん

2020/5/1816:21:18

難しく考えすぎなんじゃ?

ブロックの枠線(border)に対して、
内側にできる余白は padding、
外側にできる余白は margin、
ただそれだけ。

どっちを使うかは、
ページを作っている本人が、
ブロックが占める範囲をどこまでにしたいか次第で決まるから、
とくに正解はない、どっちでもいい、好きな方。
ブロックの領域内に余白を作りたいときは padding 使えばいいし、
ブロックの外側に余白を作りたいときは margin を使えばいい。

添付画像でいうと、
[ 図1 ] のようにしたい場合は margin、
[ 図2 ] のようにしたい場合は padding、
レイアウトのしかたによっては、
[ 図3 ] のように padding と margin を両方使う。

特殊なケースでの使い分けは以下。


【 枠線がある場合 】

ふつうブロックの枠線は見えていないけど、
CSS で border を指定すると枠線が見える。
枠線が見える場合は、
padding は枠線の内側の余白だし、
margin は枠線の外側の余白だから、
どっちを使うかで完全に見た目が変わる。
自分が作りたい結果になる方を使う。


【 背景色がある場合 】

ブロックに背景色が付いている場合、
padding の余白には背景色はつくけど、
margin の余白には背景色が付かないんで
この場合もどっちを使うかで見た目が完全に変わる。
余白の部分までいろを付けたいときは padding、
余白の部分に色を付けたくない場合は margin。


【 リンクの場合 】

ブロックがリンクの場合、
クリックできる領域は枠線(border)まで。
padding の領域はクリックできるけど、
margin の領域はクリックできない。
Javascript での click イベントも同じ。
余白をクリックに反応するようにする場合は padding、
クリックに反応しない余白を付けるには margin。

難しく考えすぎなんじゃ?

ブロックの枠線(border)に対して、
内側にできる余白は padding、...

agu********さん

2020/5/1813:35:47

>使い分けが永遠にわからない

じゃぁ教えても無駄ですよね

border を設定しているようなブロックでも使い分けしないんですか?

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる