填充是填充内容，但这不完全正确

我对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只是改变了空格的顺序;） –

填充是填充内容，但这不完全正确

回答

相关问题