私は感覚過負荷に敏感で、あまりにも多くの視覚的な詳細に混乱してしまうので、美的魅力をあまり損なうことなく、CSS 機能のパレットを管理しやすいツールキットに単純化したいと考えています。それを考えると、HTML 要素のマージンとパディングのバランスをどうしようもなく失っているようです。
したがって、パディングを優先してマージンの使用を完全に停止することを検討しています。決してビジュアル/HTML の専門家ではない私 (私は経験上バックエンド プログラマーのほうが多い) には、実行可能に思えますが、違いが存在する理由があると確信しています。
この投稿では、グルに、マージンとパディングの両方を使用する場合と使用しない場合の短所、および 2 つのうちの 1 つだけを使用することで適度にエレガントなデザインを実現できるかどうかを説明してほしいとお願いしています。また、一方では達成でき、他方では達成できないことを説明するために、誰かが例を提出できれば素晴らしいことです。
いいえ、すべての面ではありません。
マージンとパディングは 2 つの完全に異なるものです。パディングはオブジェクトの幅または高さの全体的なサイズに追加されますが、マージンは追加されません。
左に浮いている一連のリンクがあると想像してください。リンクにパディングを使用するだけでは、アンカー要素が非常に大きくなり、おそらく希望どおりにならない可能性があります。少しのパディングとマージンを使用して、アンカー間のスペースを増やす方が適しています。
マージンを使用すると、何かが他の何かから遠く離れていることが保証されます。
パディングを使用すると、何かのコンテンツがそれ自体の端から遠く離れていることが保証されます。
ページにボックスのレイアウトがあり、各ボックスと境界線の間にスペースを確保したい場合、パディングだけでは十分ではないため、マージンも使用する必要があります。
原則として、必要に応じてそれぞれを使用してください。物事が乱雑になるというあなたの言いたいことはわかりますcssが、物事を単純化する方法があります。シンプルなサイトの場合、以前に次のことを行いました。
CSS
.leftMargin {margin-left: 10px;}
.rightMargin {margin-right: 10px;}
.topMargin {margin-top: 10px;}
.bottomMargin {margin-bottom: 10px;}
.leftPadding {padding-left: 10px;}
.rightPadding {padding-right: 10px;}
.topPadding {padding-top: 10px;}
.bottomPadding {padding-bottom: 10px;}
そうすれば、手間をかけずにユニバーサルpaddingとルールを簡単に設定できます。marginしかし、繰り返しますが、これは扱いにくいマークアップを作成すると主張することができますhtml。
それは本当に自分で解決しなければならないことです。使用しているにもかかわらず考慮すべきmarginsことは、非常に望ましくない影響を与える可能性があります! マージンを折りたたむポイントへこの CSS margin-top スタイルが機能しないのはなぜですか? .
これが役に立ったことを願っています。
マージンの使用を避けることはできず、マージンにはさまざまな用途があると言えます。
パディングは要素の端とコンテンツの間にスペースを作成するために使用する必要があり、マージンは要素を分離するために使用する必要があります。
境界線をまったく使用しない場合は、間違いなくそのうちの 1 つをなくすことができますが、たとえば、2 つの div が隣り合っており、両方に境界線があり、それらに触れたくない場合、それらをどのように分離する予定ですか? それらを配置することは可能ですが、多くの場合、余白が最適な方法です。
また、要素の合計幅は width + padding であると考えてください。一方、余白のサイズは要素の「外側」にあると主張できますが、技術的には要素の一部です。
多くのスタイルマークアップがあり、パディングとマージンを均等に使用しています
両方の概念の違いを示すために作成できる最も簡単な例は、これです。
marginはborder(赤色) と周囲の間のスペースでpaddingあり、 はコンテンツ (例ではテキスト) と の間のスペースborderです。
通常は両方を使用する必要があります。ただし、境界線をまったく使用する必要がないまれなケースでは、境界線の 1 つを設定するだけでかなりうまく管理できます。
いいえ、複雑なデザインをしたい場合は違います
ウェブデザインの聖杯は、マージンとパディングの組み合わせを使用します
と は同じようなことを行うこともありますmarginがpadding、それぞれの目的は異なります。
margin他の要素と比較して、要素の側面に必要なスペースを指しますpadding要素のコンテンツとその境界線の間のスペースを指します両方を併用することで、余裕とパディングを兼ね備えた威力を発揮します。