CSS margin-left用法及代码示例

CSS中的margin-left属性用于在所需元素的左侧设置边距的宽度。允许此属性为负值。

当期望边距离其邻居更远时，使用正值。
当希望将边距放置得更近时，使用负值。

用法：

margin-left:length|auto|initial|inherit;

属性值：

length:设置以px，cm，pt定义的固定值。允许使用前面提到的负值。默认值为0 px。

margin-left:15px;

例子1：

<html> 
   <head> 
      <title> 
         CSS | margin-left Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "margin-left:15px; border-style:solid ;  
                  border-color:black;"> 
         This paragraph has 15px margin . 
      </p> 
   </body> 
</html>

例子2：

<html> 
   <head> 
      <title> 
         CSS | margin-left Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "margin-left:20%; border-style:solid ;  
                  border-color:black;"> 
         This paragraph has 20% margin . 
      </p> 
   </body> 
</html>

auto:当需要浏览器确定左边距的宽度时使用它。

margin-left:auto;

例：

<html> 
   <head> 
      <title> 
         CSS | margin-left Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "margin-left:auto; border-style:solid ;  
                  border-color:black;"> 
         This paragraph has auto margin . 
      </p> 
   </body> 
</html>

initial:它用于将margin-left属性的值设置为其默认值。

margin-left:initial;

例：

<html> 
   <head> 
      <title> 
         CSS | margin-left Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "margin-left:initial; border-style:solid ;  
                  border-color:black;"> 
         This paragraph has initial margin . 
      </p> 
   </body> 
</html>

inherit:当希望元素继承其父元素的margin-left属性作为其自己的属性时使用。

margin-left:inherit;

例子1：

<html> 
   <head> 
      <title> 
         CSS | margin-left Property 
      </title> 
   </head> 
     
   <body> 
      <div style="margin-left:50px;"> 
      <p style = "margin-left:inherit; border-style:solid ;  
                  border-color:black;"> 
         This paragraph has auto margin . 
      </p> 
      </div> 
   </body> 
</html>

例子2：

<html> 
   <head> 
      <title> 
         CSS | margin-left Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "margin-left:auto; border-style:solid ;  
                  border-color:black;"> 
         This paragraph has auto margin . 
      </p> 
        
      <p style = "margin-left:10px; border-style:solid ;  
                  border-color:black;"> 
         This paragraph has 10px margin. 
      </p> 
      <br> 
        
      <p style = "margin-left:5%;border-style:solid;  
                  border-color:black;"> 
         This paragraph has 5% margin. 
      </p> 
      <br> 
        
      <p style = "margin-left:15px; border-style:solid; 
                  border-color:black;"> 
         This text has an margin of 15px. 
      </p> 
      <br><br>    
  
      <p style = "margin-left:initial;border-style:solid; 
                  border-color:black;"> 
         This text has a margin of default 
         typeset by initial 
      </p>    
   </body> 
</html>

支持的浏览器：margin-left属性支持的浏览器如下：

谷歌浏览器1.0
Internet Explorer 6.0
Opera 3.5
Firefox1.0
Safari 1.0

相关用法

注：本文由纯净天空筛选整理自EnaMotwani大神的英文原创作品 CSS | margin-left Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。