ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML CSS -- マージンとパディングについて学ぶ_html/css_WEB-ITnose
HTML CSS -- マージンとパディングについて学ぶ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:44:51974ブラウズ
http://www.cnblogs.com/fengyv/p/3789333.html
你在学习margin和padding的时候是不是懵了，??什么他娘的内边距，什么他娘的外边距。呵呵呵，刚开始我也有点不理解，后来通过查资料学习总算弄明白了，现在我来谈一下自己对margin和padding的理解：
一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距
代码2-1：
- test1
- test2_son
- ①. マージン: 外側のマージンは、マージン要素の境界線の延長部分 (ここではクラス値 test
- 2 を持つ div) と別の要素の境界線の延長線 (他の要素の場合) の間の距離を指します。上の図
) またはインテンション (別の要素がマージン要素の親である場合) と同じレベルにあります。
②、パディング: パディングはマージン要素を指します (上図に示すように、クラス値が test2 の div の境界線の内側の延長線とその子要素の境界線の外側の延長線との間の距離です) ;③、内部マージンと外部マージンは、それらが作用する要素および他の要素に対するものです。たとえば、クラス値が test の div の内部マージンとして表示されます。
2
は、クラス値が test2_test の div 要素の外側のマージンとして表示される場合があるため、上記のコードは次のように記述することもできます: クラス値が test の div スタイル リストから「padding-top:40px;」を削除します2、クラス値test2_test??のdiv要素に「margin-top:40px;」を追加します。この効果はコード2-1と同じです 3. marginとpaddingの属性値
① デフォルト値はすべて 0、属性値は auto にすることができます。マージンが作用する要素はブラウザによって計算され、パディングが作用する要素はブラウザによって計算されます。 ; 両方とも、属性値を継承に設定することで親要素のマージンを継承できます。マージンは親要素の外側のマージンを継承し、パディングは親要素の内側のマージンを継承します。ただし、継承は Internet Explorer のどのバージョンでも使用できません (IE8 を含む)。 ）はサポートされていないため、学習する必要はありません。 Arm ②、Margin では指定された外側の距離の値を指定できますが、Padding では負の側の距離を指定することはできませんので注意してください。③ ③、マージンとパディングの属性値はすべて 1、2、3 にすることができます。そして 3 と 3 と 3 と 3 4:
m A、Margin には 4 つの属性値があります (例: Margin: 10px 5px 15px 20px;)、その意味は次のとおりです: 上と外の境界線 10px、右外側の 5px、下の外側の 15 ピクセル、左の外側の 20 ピクセルのパディングには 4 つの属性値があります (たとえば、padding: 10px 5px 15px 20px;)。つまり、上部のパディング 10 ピクセル、右側のパディング 5 ピクセル、下部のパディングです。パディング 15 ピクセル、左パディング 20 ピクセル; マージンまたはパディングですか? 属性値が 4 つある場合、その方向は順に右、下、左です。意味は次のとおりです。右側と左側の外側の辺、下側の外側の境界線の 15 ピクセル、右のパディングと左のパディングは 5 ピクセル、下のパディングは 15 ピクセルです。時計回りのアクションの方向は上、右、左、下です。C と Margin には 2 つの属性値があります (たとえば、Margin: 10px 5px;)。これは、上と外側の境界線と外側の境界線 10px を意味します。右の外側の境界線5pxアクションの時計回りは上と下、右と左です d、マージンには 1 つの属性値があります (例: margin: 10px;)。これは、4 つの外側のマージンがすべて 10px の値であることを意味します。 ）、その意味は次のとおりです。4つの内側のマージンはすべて10pxです。
一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距
代码2-1：
- test1
- test2_son
- ①. マージン: 外側のマージンは、マージン要素の境界線の延長 (ここではクラス値 test
- 2 を持つ div) と別の要素の境界の延長 (他の要素の場合) の間の距離を指します。上の図
) またはインテンション (別の要素がマージン要素の親である場合) と同じレベルにあります。
②、パディング: パディングはマージン要素を指します (上図に示すように、クラス値が test2 の div の境界線の内側の延長線とその子要素の境界線の外側の延長線との間の距離です) ;③、内部マージンと外部マージンは、それらが作用する要素および他の要素に対するものです。たとえば、クラス値が test の div の内部マージンとして表示されます。
2
は、クラス値が test2_test の div 要素の外側のマージンとして表示される場合があるため、上記のコードは次のように記述することもできます: クラス値が test の div スタイル リストから「padding-top:40px;」を削除します2、クラス値test2_test??のdiv要素に「margin-top:40px;」を追加します。この効果はコード2-1と同じです 3. marginとpaddingの属性値
① デフォルト値はすべて 0; 属性値は auto にすることができます?? margin の影響を受ける要素はブラウザによって計算され、padding の影響を受ける要素はブラウザによって計算されます。パディングを計算します。どちらも属性値を継承に設定することで親要素のマージンを継承できます。マージンは親要素の外側のマージンを継承し、パディングは親要素の内側のマージンを継承します。ただし、継承は Internet Explorer のどのバージョンでも使用できません。 (IE8含む) には対応していないため、学習する必要はありません。 Arm ②、Margin では指定された外側の距離の値を指定できますが、Padding では負の側の距離を指定することはできませんので注意してください。③ ③、マージンとパディングの属性値はすべて 1、2、3 にすることができます。そして 3 と 3 と 3 と 3 4:
m A、Margin には 4 つの属性値があります (例: Margin: 10px 5px 15px 20px;)、その意味は次のとおりです: 上と外の境界線 10px、右外側の 5px、下の外側の 15 ピクセル、左の外側の 20 ピクセルのパディングには 4 つの属性値があります (たとえば、padding: 10px 5px 15px 20px;)。つまり、上部のパディング 10 ピクセル、右側のパディング 5 ピクセル、下部のパディングです。パディング 15 ピクセル、左パディング 20 ピクセル; マージンまたはパディングですか? 属性値が 4 つある場合、その方向は順に右、下、左です。意味は次のとおりです。右側と左側の外側の辺、下側の外側の境界線の 15 ピクセル、右のパディングと左のパディングは 5 ピクセル、下のパディングは 15 ピクセルです。時計回りのアクションの方向は上、右、左、下です。C と Margin には 2 つの属性値があります (例: Margin: 10px 5px;)。これは、上と外側の境界線と下側の境界線 10px を意味します。 、右外の境界線と左の境界線5pxアクションの方向は時計回りに上と下、右と左です d、マージンには 1 つの属性値があります (例: margin: 10px;)。これは、4 つの外側のマージンがすべて 10px の値であることを意味します。 ;）、その意味は次のとおりです。4つの内側のマージンはすべて10pxです。