目次
 
ホームページ ウェブフロントエンド htmlチュートリアル HTML CSS -- マージンとパディングについて学ぶ_html/css_WEB-ITnose

HTML CSS -- マージンとパディングについて学ぶ_html/css_WEB-ITnose

Jun 24, 2016 am 11:44 AM

 

http://www.cnblogs.com/fengyv/p/3789333.html

 

你在学习margin和padding的时候是不是懵了,??什么他娘的内边距,什么他娘的外边距。呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解:

        一、什么是边距

        CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间)。

       二、什么是内边距,什么是外边距

        代码2-1:

  1.   
  2.   
  3.       
  4.           
  5.           
  6.       
  7.       
  8.         
    test1
      
  9.         
      
  10.             
    test2_son
      
  11.         
  • ①. マージン: 外側のマージンは、マージン要素の境界線の延長部分 (ここではクラス値 test
  • 2
  • を持つ div) と別の要素の境界線の延長線 (他の要素の場合) の間の距離を指します。上の図 に示すように、マージン要素 (ここにクラス値) 間の距離 (test1

    ) またはインテンション (別の要素がマージン要素の親である場合) と同じレベルにあります。

    ②、パディング: パディングはマージン要素を指します (上図に示すように、クラス値が 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:

    1.   
    2.   
    3.       
    4.           
    5.           
    6.       
    7.       
    8.         
      test1
        
    9.         
        
    10.             
      test2_son
        
    11.         
  • ①. マージン: 外側のマージンは、マージン要素の境界線の延長 (ここではクラス値 test
  • 2
  • を持つ div) と別の要素の境界の延長 (他の要素の場合) の間の距離を指します。上の図 に示すように、マージン要素 (ここにクラス値) 間の距離 (test1

    ) またはインテンション (別の要素がマージン要素の親である場合) と同じレベルにあります。

    ②、パディング: パディングはマージン要素を指します (上図に示すように、クラス値が 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です。

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    < Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

    この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

    < datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

    この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

    HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

    記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

    < meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

    この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

    HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

    この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

    HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

    この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

    ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

    この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

    < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

    この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

    See all articles