CSS gap Atribute

ការកំណត់និងការប្រើប្រាស់

gap ត្រូវបានកំណត់ជាតាមលក្ខណៈបញ្ហាចម្ងាយរវាងជិតខាងនៅក្នុង flexbox អឹមអេហ្វ ឬ grid។ វាជាការបញ្ជូលបញ្ជាក់ទៅលើលក្ខណៈបញ្ហាបន្ទាប់ពីនេះ：

ការកត់សម្គាល់：gap ត្រូវបានហៅថា grid-gap。

សូមមើលផងដែរ：

CSS ការបង្រៀនCSS ការរៀបចំបន្ទុកចុង

CSS ការបង្រៀនCSS ការរៀបចំអឹមអេហ្វ

CSS ការបង្រៀនCSS ការរៀបចំបន្ទុកក្រុម

CSS លេខាត់លក្ខណៈបញ្ហាកំណត់ចំនុចចម្ងាយរវាងបន្ទុក

CSS លេខាត់លក្ខណៈបញ្ហាកំណត់ចំនុចចម្ងាយរវាងបន្ទុក

ឧទាហាន

ឧទាហាន 1

កំណត់ចំនុចចម្ងាយរវាងបន្ទុក 50px：

.grid-container {
  gap: 50px;
}

ពឹងនឹងព្យាយាមដោយខ្លួនឯង

ឧទាហាន 2: ការរៀបចំបន្ទុកចុង

កំណត់ចំនុចចម្ងាយរវាងជិតខាង 20px និងចំនុចចម្ងាយរវាងបន្ទុក 50px នៅក្នុងការរៀបចំបន្ទុកចុង：

#grid-container {
  display: grid;
  gap: 20px 50px;
}

ពឹងនឹងព្យាយាមដោយខ្លួនឯង

ឧទាហាន 3: ការរៀបចំអឹមអេហ្វ

កំណត់ចំនុចចម្ងាយរវាងជិតខាង 20px និងចំនុចចម្ងាយរវាងបន្ទុក 70px នៅក្នុងការរៀបចំអឹមអេហ្វ：

#flex-container {
  display: flex;
  gap: 20px 70px;
}

ពឹងនឹងព្យាយាមដោយខ្លួនឯង

ឧទាហាន 4: ការរៀបចំបន្ទុកក្រុម

កំណត់ចំនុចចម្ងាយរវាងបន្ទុក 50px នៅក្នុងការរៀបចំបន្ទុកក្រុម：

#newspaper {
  columns: 3;
  gap: 50px;
}

ពឹងនឹងព្យាយាមដោយខ្លួនឯង

ច្បាប់ CSS

gap: row-gap column-gap|initial|inherit;
តម្លៃ ការពន្យល់
row-gap កំណត់ទំហំចំនុចចម្ងាយរវាងជិតខាងនៅក្នុងការរៀបចំបន្ទុក អឹមអេហ្វ ឬអឹមអេហ្វ។
column-gap កំណត់ទំហំចំនុចចម្ងាយរវាងបន្ទុក អឹមអេហ្វ អឹមអេហ្វ ឬបន្ទុកក្រុម។
initial កំណត់រង្វាស់នេះទៅជាតាមលក្ខណៈបញ្ហាការដែលបញ្ជាក់។ សូមមើល： initial。
inherit បន្ទាប់ពីកំណើតបណ្ដាញសំរាប់រង្វាស់នេះ ការកាត់ទុកពីកំណើតបណ្ដាញមេ។ សូមមើល： inherit。

ពត៌មានបច្ចេកទេស

តាមលក្ខណៈបញ្ហាការដែលបញ្ជាក់ normal normal
ការកាត់ទុក ទោះបីជា
ការរន្ទុកម៉ូដិន： គាំទ្រ。សូមមើលលក្ខណៈបញ្ហាផ្សេងទៀត។ សូមមើល：លក្ខណៈបញ្ហាទាក់ទងនឹងការរន្ទុកម៉ូដិន。
កំណែនាំ: CSS Box Alignment Module Level 3
ច្បាប់ JavaScript: object.style.gap="50px 100px"

ការគាំទ្រនៃកំណើតមុខបណ្ដាញ

ចំណុចតួលេខនៅក្នុងតារាង បញ្ជាក់ថាការគាំទ្ររបស់កំណើតមុខបណ្ដាញដែលគាំទ្រនូវលក្ខណៈបញ្ហានេះ។

ការរៀបចំ Chrome IE / Edge Firefox Safari Opera
ក្នុងបន្ទុកចុង 66 16 61 12 53
ក្នុងបន្ទុកអឹមអេហ្វ 84 84 63 14.1 70
ក្នុងបន្ទុកក្រុម 66 16 61 មិនគាំទ្រ 53