您的位置：首页 > 其它

关于行内元素可以设置padding,border的测试

2012-08-01 14:59 316 查看

一、总结

块级元素设置padding，border改变布局，改变嵌套内容的框占据文档流中的范围（同样也影响背景的区域）。

行内元素设置padding，border在应用背景图片的时候会有显示，但是不改变垂直方向的布局。结果会出现设置后padding，border的背景会覆盖上面的元素的内容，下部被当做背景，被下级元素覆盖。

二、测试

<!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>Test a border</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<style type="text/css">
<!--
body {
background-color: #9DD100;
}
a:link, a:visited {
text-decoration: none;
border: 1px dotted #000;
}
a:hover, a:focus, a:active {
border-style: solid;
}
.one {
border: 20px solid white;
padding: 10px;
}
.one:hover {
border: none;
}
-->
</style>
</head>
<body>
<br/>
<a href="http://wef.com">baidu.com</a>
<hr/>
<span class="one">BAIDU</span>
<span>GOOGLE</span>
<p>YAHOO</p>
</body>
</html>

<1>鼠标未经过时

<2>鼠标经过时

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航