cssで 〇〇あいうえお (〇〇は空白) としたい場合、padding-left: 30px;かma

cssで 〇〇あいうえお (〇〇は空白) としたい場合、padding-left: 30px;かmargin-left: 30px;だとどちらが良いのでしょうか？また違いはなんですか？教えてください。

No.4 回答者： naokita 回答日時： 2021/09/26 08:42

今回の質問だと「１行テキスト」だから、text-indentが適しているかも。

男と女、どっちが得？みたなな質問・・・
marginだと、隣接する要素によってちがってくる
ボックスに色やborderがある場合だと、paddhingが多いでしょう。

まあ、他の兼ね合いもあるから、一概にはどちらが正しいなんて事はない。

No.3 回答者： Ogre7077 回答日時： 2021/09/26 08:38

padding と margin の使い分けは、

他の回答にもあるように組版の方針によるとしか答えられません。

空白が段落の先頭だけでよいなら、字下げする方式もあります。
text-indent: 2em;
参考)
https://developer.mozilla.org/ja/docs/Web/CSS/te …

No.2 回答者： admiral_ya 回答日時： 2021/09/26 02:09

どちらが良いか? は自分が何をしたいのか? により変わるので、正解はありません

padding と margin は余白を入れる場所が違うので

基本的には、padding は要素内の余白なので、
・要素 A の padding が a
・要素 B の padding が b
・margin はどちらも 0
なら要素 A, B 間の余白は a+b になります

それに対して、margin は要素外の余白で、異なる場合は大きい方なので
・要素 A の margin が a
・要素 B の margin が b
・padding はどちらも 0
なら要素 A, B 間の余白は max(a,b) になります

一度実際に隣り合う2つの要素で
・両者とも border 付き
・padding, margin を変えて
結果を見てみるとわかりやすいと思います

No.1 回答者： naktak 回答日時： 2021/09/26 00:59

どういう思想でデザインするかなので、正解はありません。

一定の領域を確保して、内部要素の余白は内部で行うべきか。
この場合は内部要素に対してmarginが使われます。

一定の領域を確保する時に、予め内部余白を確保するべきか。
この場合は外部要素に対してpaddingが使われます。

個人的には、基本的にブロック要素になりうる外からpaddingでデザインを決めていき、インライン要素のmargin(左右のみ)でデザインを決めるようにしています。
インデントが深くなった時、中の要素の余白概念は、極力外の要素に依存するように、ということです。

paddingは領域の範囲に対して余白を設けますが、marginは領域の範囲の外に対して余白を設けます。

視覚的には下記ページなどをご覧になられた方が分かりやすいでしょう。
padding margin 違い
などで沢山でてきます。

https://taneppa.net/margin_padding/