内联元素之padding和margin的表现

来源：互联网发布：淘宝权直播间编辑：程序博客网时间：2024/05/07 21:53

<!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" /><title>无标题文档</title><style type="text/css">*{margin:0px;padding:0px;}</style></head><body>a定义dispaly:block前<p><a style="border:1px solid #f00">我们是羊1</a></p><p>female<a style="margin:50px;border:1px solid #f00">我们是羊2定义了margin值</a>women</p><p><a style="padding:10px;border:1px solid #f00">我们是羊3定义了padding值</a>women</p><p><a style="width:10000px;height:100px;border:1px solid #f00">我们是羊4定义了宽高</a>women</p>结论：在未定义display:block和float:left 时,内联元素的padding和margin只有左右好用上下不好用，注意观察第二和第三虽然padding的上下内补白能把border撑开但是它不会在空间上有一定距离,定义宽高不好用。<br/><br/><br/>a定义dispaly:block后<p>female<a style="border:1px solid #f00;display:block;">我们是羊1</a>women</p><p>female<a style="border:1px solid #f00;display:block;width:500px;height:100px;">我们是羊2</a>women</p><p>female<a style="margin:50px;border:1px solid #f00;display:block;width:500px;height:100px;">我们是羊3</a>women</p><p>female<a style="padding:10px;border:1px solid #f00;display:block;">我们是羊4</a>women</p><br/><br/><br/>结论:a定义float:left后<p><a style="border:1px solid #f00;float:left">我们是羊1</a>烦人烦人日日日日</p><div style="clear:both;height:0px;overflow:hidden;"></div><p>female<a style="margin:50px;border:1px solid #f00;float:left">我们是羊2</a>women</p><div style="clear:both;height:0px;overflow:hidden;"></div><p><a style="border:1px solid #f00;float:left">我们是羊3</a>women</p><div style="clear:both;height:0px;overflow:hidden;"></div><p><a style="padding:10px;border:1px solid #f00;float:left">我们是4羊</a>women</p><div style="clear:both;clear:both;height:0px;overflow:hidden;"></div><br/><br/><br/>p定义dispaly:block前<p><span style="border:1px solid #f00;display:block;">我们是羊</span></p><p>female<span style="margin:10px;border:1px solid #f00;display:block;">我们是羊</span>women</p><p><span style="padding:10px;border:1px solid #f00;display:block;">我们是羊</span></p><br/><br/><br/>p定义dispaly:block后<p><span style="border:1px solid #f00;display:block;">我们是羊</span></p><p>female<span style="margin:10px;border:1px solid #f00;display:block;">我们是羊</span>women</p><p><span style="padding:10px;border:1px solid #f00;display:block;">我们是羊</span></p></body></html>

总结：结论：在未定义display:block和float:left 时,内联元素的padding和margin只有左右好用上下不好用，注意观察第二和第三虽然padding的上下内补白能把border撑开但是它不会在空间上有一定距离,定义宽高不好用。

当定义了display:block后a标签的表现和块儿级元素一样

当定义了float：left后padding、margin上下左右都起作用