填充是填充內容，但這不完全正確

我對CSS很新。根據文件填充內容。在這個例子中的內容是「Gifts and Special Offers」在這個簡單的例子中，我將padding-right設置爲150px，這應該意味着根據文檔我應該在內容右側有150px的空間。但是在內容的右側沒有150px的空白空間。我在這裏肯定錯過了理解的東西？填充是填充內容，但這不完全正確

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Chapter 5: Indestructible Boxes</title> 
    <style type="text/css" media="screen"> 
    h3 
    { 
     margin:50px; 
     padding:0px 150px 0px 0px; 
     border:1px solid black; 
    } 
    </style> 
</head> 
<body> 
    <div style="width:200px; background:red;"> 
    <h3>Gifts and Special Offers</h3> 
    </div> 
</body> 
</html>

//託尼

來源

2013-08-24 user2658578

Padding是內間距。

Margin是外部間距。

當你給h3以下樣式，你實際上從四面八方外間隔的50px將其包裝，並額外150px內部間隔的權利。

margin: 50px; 
padding: 0px 150px 0px 0px;

這使得水平間距50px + 150px + 50px = 250px。

Resulted spacing

注意到你的DIV只有200px寬，所以你要去有讓你期待什麼煩惱。

來源

2013-08-24 14:50:45 Itay

+1只是改變了空格的順序;） –

填充是填充內容，但這不完全正確

回答

相關問題