Box model

Border

คือการกำหนดเส้นขอบให้กับ element นั้น

• กำหนด border เฉพาะด้านที่ต้องการ

  .box-1{
    background-color: #333333;
    color:#fff;
  
    border-left: 5px red solid;
    border-right: 5px red solid;
    border-top: 5px red solid;
    border-bottom: 5px red solid;
  }
  

• หรือถ้าจะกำหนดให้มีขอบทั้ง 4 ด้านก็ใช้แค่ border ตัวเดียวก็ได้

  .box-1{
    background-color: #333333;
    color:#fff;
  
    border: 5px red solid;
  }
  

  ดูเพิ่มเติมเกี่ยวกับการใช้ border ได้ที่ https://www.w3schools.com/css/css_border.asp

Padding

เป็นการกำหนดพื้นที่ระยะห่างระหว่า border กับ content ใช้งานลักษณะเดียวกันกับ border

• กำหนด padding ทีละด้าน

  .box-1{
    background-color: #333333;
    color:#fff;
  
    border: 5px red solid;
  
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  

• กำหนด padding ทุกด้าน

  .box-1{
    background-color: #333333;
    color:#fff;
  
    border: 5px red solid;
  
    padding: 20px;
  }
  

ดูเพิ่มเติมเกี่ยวกับการใช้ padding ได้ที่ https://www.w3schools.com/css/css_padding.asp

Margin

คือการกำหนดระนะห่างระหว่างขอบด้านนอกกับ border ของ element ใช้งานเช่นเดียวกันกับ border และ padding

• กำหนด margin ทีละด้าน

  .box-1{
    background-color: #333333;
    color:#fff;
  
    border: 5px red solid;
  
    padding: 20px;
  
    margin-left: 20px; 
    margin-right: 20px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
  }
  

• กำหนด margin ทุกด้าน

  .box-1{
    background-color: #333333;
    color:#fff;
  
    border: 5px red solid;
  
    padding: 20px;
  
    margin: 20px; 
  }
  

ดูเพิ่มเติมเกี่ยวกับการใช้ margin ได้ที่ https://www.w3schools.com/css/css_margin.asp