加载中…day47:<p>元素默认带有外边距
(2017-02-27 19:31:13)
在网页中设置的p元素，在上下方向默认带有外边距
//为看清div的作用范围，给div加一个粗点的灰色边框
//声明div是相对定位，使得p能以div为父元素进行绝对定位
//设置p元素的绝对位置，位于其父元素的顶端，即灰色边框的上沿
//设置p元素的绝对位置，位于其父元素的顶端，即灰色边框的上沿
margin:0; //解决方法，设外边距为0
我们用一个代码来说明：
<!doctype
html>
<html>
<head>
<title><p>元素自带外边距</title>
<meta charset="utf-8"/>
<style type="text/css">
div{
border:3px solid #ccc;
position:relative;
}
p{
border:1px solid #f00;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div>
<img src="../../bird.jpg">
<p>你根本不明白力量为何物</p>
</div>
</body>
</html>
网页显示为：
http://s6/mw690/0069tu18zy797fvHaIdd5&690
如图，以绝对定位的方式设置p元素位于div元素top=0，left=0处。左边(left)对齐div边框没问题，但上沿实际得到的却是top>0的位置。
如图，以绝对定位的方式设置p元素位于div元素top=0，left=0处。左边(left)对齐div边框没问题，但上沿实际得到的却是top>0的位置。
究其原因----<p>元素在上下方向默认带了外边距，以使得每行信息不会紧挨到一起，影响阅读
那么，如何才能使得p位于top=0的位置呢？
解决方法：很简单，设置p的外边距为0即可
代码为：
p{
border:1px solid #f00;
position:absolute;
top:0;
left:0;
}
增加p元素外边距为0后，用浏览器打开，显示为：
喜欢
0
赠金笔
前一篇：day47：绝对定位与相对定位