页面中到处都是<p>的时候，怎么页面中的<div>或<span>被分的一条一条的？

就像这样，用鼠标点击页面中框内区域，不同的地方显示不一样。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.onmousedown = MouseDown
function MouseDown()
{
t1.value=event.srcElement.id;
}
//-->
</SCRIPT></HEAD><BODY BGCOLOR="#FFFFFF">
<P>
<SPAN id=span1   style="BORDER-RIGHT: thin dotted; BORDER-TOP: thin dotted; 
FONT-SIZE: 10.5pt; Z-INDEX: 1; LEFT: 79px; VISIBILITY: visible; BORDER-LEFT: thin dotted; 
WIDTH: 309px; COLOR: black; BORDER-BOTTOM: thin dotted; FONT-FAMILY: Arial; 
POSITION: absolute; TOP: 1px; HEIGHT: 264px; borderstyle: thin" >
</SPAN><P id="p2">&nbsp;</P> 
<P id="p3">&nbsp;</P>  
<P id="p4">&nbsp;</P>  
<P id="p5">&nbsp;</P>  
<P id="p6">&nbsp;</P>  
<P id="p7">&nbsp;</P>  
<P id="p8">&nbsp;</P>  
<P id="p9">&nbsp;</P>  
<P id="p10">&nbsp;</P>  
<P id="p12">&nbsp;</P>  
<P id="p13">&nbsp;</P>  
<P id="p14">&nbsp;</P><INPUT TYPE="text" style="width:500px" NAME="t1"></BODY>
</HTML>