Box Model : margin, border, padding

Box Model : margin, border, padding

91e7aee9769836f448a9f1ce91255749?s=128

Masateru YOSHIMURA

June 26, 2020
Tweet

Transcript

  1. ઢͱ಺ଆͷ༨ന

  2. ίϯςϯπͱ༨നͱઢ ίϯςϯπʢจࣈ΍ը૾ʣʹରͯ͠ w֎ଆͷ༨ന wઢ w಺ଆͷ༨ന ͕ઃఆͰ͖Δɻ ͜ΕΒΛ༻͍Δ͜ͱͰ ΑΓݟ΍͍͢ϨΠΞ΢τ͕Ͱ͖Δɻ margin border

    padding margin padding border
  3. Έͳ͞Μ΁࿈བྷͰ͢ খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ

    तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ ΑΓಡΈ΍͘͢ Έͳ͞Μ΁࿈བྷͰ͢ খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ Έͳ͞Μ΁࿈བྷͰ͢ খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ
  4. Έͳ͞Μ΁࿈བྷͰ͢ খςετ͸ຬ఺ΛΊ͟͠·͠ΐ͏ ςετͷ໰୊͸ɺεϥΠυΛ͢ΈͣΈ·ͰಡΊ ͹ඞͣਖ਼ղ͕ग़ͤΔΑ͏ʹͳ͍ͬͯ·͢ɻςε τ͸εϥΠυΛݟͳ͕Βडݧͯ͠΋ྑ͍ͷͰɺ ৗʹຬ఺Λ໨ࢦ͍ͯͩ͘͠͞ɻͦ͏͢Δ͜ͱͰ ஌͕ࣝ਎ʹ͖ͭ·͢ɻ ՝୊͸ඞͣఏग़͠·͠ΐ͏ ͜ͷतۀ͸ظ຤ʹςετΛߦ͍·ͤΜɻຖճͷ तۀ՝୊Λ૯߹ͯ͠੒੷Λग़͠·͢ɻΑͬͯɺ

    तۀ՝୊ͷະఏग़͕ଓ͘ͱ୯ҐΛམͱ͢͜ͱʹ ͭͳ͕Γ·͢ͷͰ஫ҙ͍ͯͩ͘͠͞ɻ border-bottom border-left
  5. ల։લ ల։ޙ ࢖༻ྫ Ұํ޲ʹઃఆ mt mr mb ml margin-top margin-right

    margin-bottom margin-left mt48 → margin-top : 48px; mr48 → margin-right : 48px; mb48 → margin-bottom : 48px; ml48 → margin-left : 48px; ·ͱΊͯઃఆ m margin m0 → margin : 0; m20-10 → margin : 20px 10px; m20-0-10 → margin : 20px 0 10px; m20-0-10-5 → margin : 20px 0 10px 5px; ୯Ґ͸QYͷ΄͔ʹFN΍΍ͳͲ͕ࢦఆͰ͖Δɻ NBSHJOͷઃఆํ๏͍Ζ͍Ζ ֎ଆͷ༨നͷ෇͚ํ ্Լࠨӈͷ༨നΛɺ͸୯ҐΛলུͰ͖Δ ্ԼQYɺࠨӈQY ্QYɺࠨӈɺԼQY ্QYɺࠨɺԼQYɺӈQY ্ͷ༨നΛQY ӈͷ༨നΛQY Լͷ༨നΛQY ࠨͷ༨നΛQY
  6. ల։લ ల։ޙ ࢖༻ྫ Ұํ޲ʹઃఆ pt pr pb pl padding-top padding-right

    padding-bottom padding-left pt48 → padding-top : 48px; pr48 → padding-right : 48px; pb48 → padding-bottom : 48px; pl48 → padding-left : 48px; ·ͱΊͯઃఆ p padding p0 → padding : 0; p20-10 → padding : 20px 10px; p20-0-10 → padding : 20px 0 10px; p20-0-10-5 → padding : 20px 0 10px 5px; ୯Ґ͸QYͷ΄͔ʹFN΍΍ͳͲ͕ࢦఆͰ͖Δɻ QBEEJOHͷઃఆํ๏͍Ζ͍Ζʢߟ͑ํ͸NBSHJOͱಉ͡ʣ ಺ଆͷ༨നͷ෇͚ํ ্Լࠨӈͷ༨നΛɺ͸୯ҐΛলུͰ͖Δ ্ԼQYɺࠨӈQY ্QYɺࠨӈɺԼQY ্QYɺࠨɺԼQYɺӈQY ্ͷ༨നΛQY ӈͷ༨നΛQY Լͷ༨നΛQY ࠨͷ༨നΛQY
  7. ల։લ ల։ޙ ࢖༻ྫɺ༻్ Ұํ޲ʹઃఆ bt br bb bl border-top: 1px

    ; border-right: 1px ; border-bottom: 1px ; border-left: 1px ; bl5-s-#0 border-left: 5px solid #000; bb1 border-bottom: 1px dashed #000; ·ͱΊͯઃఆ bd border: 1px ; border: 1px solid #000; CPSEFSͷઃఆํ๏͍Ζ͍Ζ ઢͷ෇͚ํ ΄͔ʹ΋ ݟग़͠ͷ૷০ͱͯ͠ ଠ͞ छྨ ৭ dashed dotted double ݟग़͠ͷ૷০΍ίϯςϯπͷ۠੾Γઢͱͯ͠ ஋Λมߋ͍ͯ͠Ζ͍Ζࢼͯ͠ΈΑ͏ɻ ͳͲ