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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。