<div>里包含<p>标签疑问
2011-07-29 11:00
344 查看
<!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>
p标签包含的范围
p标签的父标签<div id="left">包含的范围
为什么出现如上结果呢？
因为父标签没设置padding属性的原因。
而此问题在ie6不存在。
<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>
p标签包含的范围
p标签的父标签<div id="left">包含的范围
为什么出现如上结果呢？
因为父标签没设置padding属性的原因。
而此问题在ie6不存在。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- <p>标签为何不可以包含<div>标签
- html页面显示div源代码：用<xmp></xmp>标签
- <div>/<span>/<label>标签
- 消除被两个<p>标签包含的<img> 之间的缝隙
- IE6/7之<div>标签嵌套img元素垂直加4px ， li 中包含浮动元素， IE下有间距
- <span>和<div>标签的隐藏和显示切换
- div包含<img/>时，图片下方出现空隙的解决方法
- Mybatis的<where><foreach><set>等标签详解
- <span>标签与<p>标签有什么区别
- JSP的<c:choose><c:forEach><c:if><c:when><c:set>标签
- 如何在网页中直接显示标签如<div>
- 火狐下<a>标签里嵌套的<select>不能选的bug
- Mybatis的<where><foreach><set>等标签详解
- mybatis 的<choose> <when>标签和<if test >标签的区别
- HTML <div> 标签
- <span>与<div>标签
- 如何用Java调用R（包含在服务器安装的过程）以及用R生成的图片如何用<img>标签访问
- HTML中 <div>标签内背景图片自适应div大小
- Mybatis的<where><trim><set>标签使用和排重
- <code>和<pre>标签