HTML | DOM 样式 columnGap 属性

DOM 样式 columnGap属性指定列之间的间隙。

句法 ：

• 返回值：

  object.style.columnGap
  

• 设置值：

  object.style.columnGap = "length|normal|initial|inherit"
  

属性值：

• length：以长度单位设置列间距。
• normal：列间距的默认值。
• 初始：设置默认值。
• 继承：从父元素继承属性。

返回值：这将返回一个表示元素的列间隙属性的字符串。

1. 长度：这指定将设置列之间的间隙的长度。
   示例 1：

     
   
       
           HTML | DOM Style columnGap Property
       
       
           #myDIV {
               width: 600px;
               height: 70%;
               border: 2px solid green;
               padding: 10px;
               column-count: 3;
           }
             
           #p1 {
               font-size: 20px;
               color: green;
           }
       
   
     
   
     
       
           
             Welcome to GeeksforGeeks.! 
             An operating system acts as an intermediary
             between the user of a computer and computer 
             hardware. The purpose of an operating system
             is to provide an environment in which a user
             can execute programs in a convenient and 
             efficient manner. An operating system is 
             software that manages the computer hardware. 
             The hardware must provide appropriate mechanisms
             to ensure the correct operation of the computer 
             system and to prevent user programs from 
             interfering with the proper operation of the system.
           
       
       
     
       
       
           function mainFunction() {
     
               //  Set columnGap in length.
               document.getElementById(
                   "myDIV").style.columnGap = "100px";
           }
       
     
   
     

   输出：

   • 点击前：

     

   • 点击后：

     

2. 正常：这指定列之间的正常间隙。
   示例 2：

     
   
       
           HTML | DOM Style columnGap Property
       
       
           #myDIV {
               width: 600px;
               height: 70%;
               border: 2px solid green;
               padding: 10px;
               column-count: 3;
               column-gap: 100px;
           }
             
           #p1 {
               font-size: 20px;
               color: green;
           }
       
   
     
   
     
       
           
             Welcome to GeeksforGeeks.! 
             An operating system acts as an intermediary
             between the user of a computer and computer 
             hardware. The purpose of an operating system
             is to provide an environment in which a user
             can execute programs in a convenient and 
             efficient manner. An operating system is 
             software that manages the computer hardware. 
             The hardware must provide appropriate mechanisms
             to ensure the correct operation of the computer 
             system and to prevent user programs from 
             interfering with the proper operation of the system.
           
       
       
         
         
       
       
           function mainFunction() {
             
               //  Set columnGap to normal.
               document.getElementById(
               "myDIV").style.columnGap = "normal";
           }
       
     
   
     

   输出：

   • 点击前：

     

   • 点击后：

     

3. 初始：这将此属性设置为其默认值。
   示例 3：

     
   
       
           HTML | DOM Style columnGap Property
       
       
           #myDIV {
               width: 600px;
               height: 70%;
               border: 2px solid green;
               padding: 10px;
               column-count: 3;
               column-gap: 100px;
           }
             
           #p1 {
               font-size: 20px;
               color: green;
           }
       
   
     
   
     
       
           
               Welcome to GeeksforGeeks.!
             An operating system acts as an intermediary
             between the user of a computer and computer 
             hardware. The purpose of an operating system 
             is to provide an environment in which a user 
             can execute programs in a convenient and 
             efficient manner. An operating system is
             software that manages the computer hardware.
             The hardware must provide appropriate mechanisms
             to ensure the correct operation of the computer
             system and to prevent user programs from 
             interfering with the proper operation of the 
             system.
           
       
       
     
       
     
       
           function mainFunction() {
     
               //  set columnGap into normal.
               document.getElementById(
                   "myDIV").style.columnGap = "initial";
           }
       
     
   
     

   输出：

   • 点击前：

     

   • 点击后：

     

4. 继承：这从其父元素继承此属性。
   示例 4：

     
   
       
           HTML | DOM Style columnGap Property
       
       
           #myDIV {
               width: 600px;
               height: 60%;
               border: 2px solid green;
               padding: 10px;
               column-count: 3;
               column-gap: 100px;
           }
             
           #p1 {
               column-gap: 50px;
           }
       
   
     
   
     
       
           
               
                 Welcome to GeeksforGeeks.!
     
             
             An operating system acts as an intermediary
             between the user of a computer and computer 
             hardware. The purpose of an operating system 
             is to provide an environment in which a user
             can execute programs in a convenient and 
             efficient manner. An operating system is 
             software that manages the computer hardware.
             The hardware must provide appropriate mechanisms 
             to ensure the correct operation of the computer 
             system and to prevent user programs from 
             interfering with the proper operation of the 
             system.
           
       
       
     
       
     
       
           function mainFunction() {
     
               //  Set columnGap "inherit".
               document.getElementById(
                   "myDIV").style.columnGap = "inherit";
           }
       
     
   
     

   输出：

   • 点击前：

     

   • 点击后：

     

注意：对 Mozilla Firefox 使用MozColumnRule。

支持的浏览器： HTML支持的浏览器 | DOM 样式 columnGap 属性
下面列出：

• 谷歌浏览器
• 边缘
• 歌剧
• 苹果浏览器