<div>里包含<p>标签疑问

阳光穿透心脏的1/2处 2022-04-10 07:52 158阅读 0赞

<! 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 >   
 < title > 左中右版式 </ title >   
 < style  type ="text/css" >   
body  
 \{    
margin :  0px ;   
padding :  0px ;   
font-family :  Arial ;   
color :  \#060 ;   
background-color :  \#dddddd ;   
 \}   
\#banner  
 \{    
margin : 0px ;   
 \}   
\#mainBox  
 \{    
margin : 0px ;   
 \}   
\#left  
 \{    
position :  relative ;   
top :  0px ;   
left :  0px ;   
margin :  0px ;   
background :  \#cce9ff ;   
width :  190px ;  /\*  固定宽度  \*/   
 \}   
\#middle  
 \{    
padding :  10px ;   
background :  \#ffffff ;   
margin :  0px 190px 0px 190px ;  /\*  左右空190px  \*/   
margin-top :  0px ;   
 \}   
\#right  
 \{    
position :  relative ;   
top :  0px ;   
right :  0px ;   
margin :  0px ;   
background :  \#cce9ff ;   
width :  190px ;   
 \}   
p  
 \{    
font-size :  12px ;   
  
margin :  20px 0px 0px 20px ;   
padding :  10px ;   
 \}   
pre  
 \{    
font-size :  12px ;   
line-height :  20px ;   
margin :  20px 0px 10px 0px ;   
font-family :  arial ;   
 \}   
 </ style >   
 </ head >   
 < body >   
 < div  id ="banner" >< img  src ="banner1.jpg"  alt =""  />   
 </ div >   
 < div  id ="mainBox" >   
 < div  id ="left" >   
 < p >   
left </ p >   
 </ div >   
 < div  id ="middle" >   
 < pre >   
body\{  
margin:0px; padding:0px;  
font-family:arial;  
color:\#060;  
background-color:\#CCC;  
\}  
\#left\{  
position:absolute;  
top:0px;  
left:0px;  
margin:0px;  
background:\#FFF;  
width:190px;/\* 固定宽度 \*/  
\}  
\#middle\{  
padding:10px;  
background:\#FFF;  
margin:0px 190px 0px 190px;/\* 左右空190px \*/  
margin-top:0px;  
\}  
\#right\{  
position:absolute;  
top:0px;  
right:0px;  
margin:0px;  
background:\#FFF;  
width:190px;/\* 固定宽度 \*/  
\}  
p\{  
font-size:12px;  
line-height:22px;  
margin:20px 0px 10px 0px;  
padding:10px;  
\}  
pre\{  
font-size:12px;  
line-height:20px;  
margin:20px 0px 10px 0px;  
font-family:arial;  
\}  
 </ pre >   
 </ div >   
 < div  id ="right" >   
 < p >   
right </ p >   
 </ div >   
 </ div >   
 < div  id ="footer" > aappooiiuuyy </ div >   
 </ body >   
 </ html >

![E6_9C_AA_E5_91_BD_E5_90_8D.JPG][]

p标签包含的范围

![E6_9C_AA_E5_91_BD_E5_90_8D2.JPG][]

p标签的父标签<div id="left">包含的范围

![E6_9C_AA_E5_91_BD_E5_90_8D3.JPG][]

为什么出现如上结果呢？

因为父标签没设置padding属性的原因。

而此问题在ie6不存在。

[E6_9C_AA_E5_91_BD_E5_90_8D.JPG]: /images/20220401/8d6333f624624218b2f07588dc3e407a.png
[E6_9C_AA_E5_91_BD_E5_90_8D2.JPG]: /images/20220401/33f00dcfe19e443c9936cc695dac0e6b.png
[E6_9C_AA_E5_91_BD_E5_90_8D3.JPG]: /images/20220401/23cf0128b37b4478be299c6682586a37.png