誰能解釋下block & inline? - web标准设计

浏览：432 2008-06-06 17:00 来自 Shpix :

對block inline 說得最多的是block是塊，一個塊占一行，新塊會另起一行。
inline不會。
我覺得這解釋很難說明白，也不好理解。而且發現inline的許多屬性，跟block不一樣
就如這段
<html>
<head>
<style type="text/css">
div{
padding:0.75em;
border-width:1px;
border-style:solid;
}
#txt{
padding:0.75em;
border-width:1px;
border-style:solid;
}
em{
padding:0.75em;
border-width:1px;
border-style:solid;
}
</style>
</head>
<body>
<div>
<span id="txt"><em>Long</em></span>
</div>
</body>
</html>
內聯padding有左右旁白，而上下沒了，但如果是文本，padding上下也有效果。這該怎么解釋

收藏楼主

4个月前 【组长】阿一(杨正祎) :

块元素和级联元素在一些情况下会发生变化的。

看这个：级联元素变成了块元素。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
*{
font-size:medium;margin:0;padding:0;
}
span{
border:1px solid red;
background-color:blue;
width:200px;
height:200px;
float:left;
}
</style>
</head>
<body>

<span>阿一</span>

</body>
</html>

1楼