CSS layout property : สอน property ของ layout property, เรียน property ของ layout property
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • margin-top ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านบน
    margin-right ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านขวา
    margin-bottom ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านล่าง
    margin-left ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านซ้าย
    margin ใช้กำหนดค่าต่างๆของ property margin
    padding-top ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านบน
    padding-right ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านขวา
    padding-bottom ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านล่าง
    padding-left ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านซ้าย
    padding ใช้กำหนดค่าต่างๆของ property padding
    width ใช้กำหนดค่าความกว้างของพื้นที่ให้ element
    min-width ใช้กำหนดค่าความกว้างต่ำสุด ( อย่างน้อย ) ของพื้นที่ให้ element
    max-width ใช้กำหนดค่าความกว้างสูงสุด ( อย่างมาก ) ของพื้นที่ให้ element
    height ใช้กำหนดค่าความสูงของพื้นที่ให้ element
    min-height ใช้กำหนดค่าความสูงต่ำสุด ( อย่างน้อย ) ของพื้นที่ให้ element
    max-height ใช้กำหนดค่าความสูงสูงสุด ( อย่างมาก ) ของพื้นที่ให้ element
  • property :
    margin-top

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านบน

    example :
    { margin-top: 20px; }

  • property :
    margin-right

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านขวา

    example :
    { margin-right: auto; }

  • property :
    margin-bottom

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านล่าง

    example :
    { margin-bottom: 10px; }

  • property :
    margin-left

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านซ้าย

    example :
    { margin-left: 15px; }

  • property :
    margin

    content :
    ใช้กำหนดค่าของ property margin-top, margin-right, margin-bottom, margin-left
    ได้พร้อมกันตามลำดับ

    example :
    { margin: 20px auto 10px 15px; }

  • property :
    padding-top

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านบน

    example :
    { padding-top: 15px; }

  • property :
    padding-right

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านขวา

    example :
    { padding-right: 10px; }

  • property :
    padding-bottom

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านล่าง

    example :
    { padding-bottom: auto; }

  • property :
    padding-left

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านซ้าย

    example :
    { padding-left: 20px; }

  • property :
    padding

    content :
    ใช้กำหนดค่าของ property padding-top, padding-right, padding-bottom, padding-left
    ได้พร้อมกันตามลำดับ

    example :
    { padding: 15px 10px auto 20px; }

  • property :
    width

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดค่าความกว้างของพื้นที่ให้ element

    example :
    { width: 300px; }

  • property :
    min-width

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดค่าความกว้างต่ำสุด ( อย่างน้อย ) ของพื้นที่ให้ element

    example :
    { min-width: 260px; }

  • property :
    max-width

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดค่าความกว้างสูงสุด ( อย่างมาก ) ของพื้นที่ให้ element

    example :
    { max-width: 340px; }

  • property :
    height

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดค่าความสูงของพื้นที่ให้ element

    example :
    { height: auto; }

  • property :
    min-height

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดค่าความสูงต่ำสุด ( อย่างน้อย ) ของพื้นที่ให้ element

    example :
    { min-height: 150px; }

  • property :
    max-height

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดค่าความสูงสูงสุด ( อย่างมาก ) ของพื้นที่ให้ element

    example :
    { max-height: 100px; }

 
Share This Chapter Login with Facebook