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

最新推荐文章于 2024-06-04 14:13:01 发布

nuptsv_ice

最新推荐文章于 2024-06-04 14:13:01 发布

阅读量1k

点赞数

分类专栏： asp.net 文章标签： border 测试 html 文档

asp.net 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

一、总结

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

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

二、测试

[html]view plaincopyprint? 
   
 <!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>鼠标经过时

nuptsv_ice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于行内元素可以设置padding,border的测试

一、总结块级元素设置padding，border改变布局，改变嵌套内容的框占据文档流中的范围（同样也影响背景的区域）。行内元素设置padding，border在应用背景图片的时候会有显示，但是不改变垂直方向的布局。结果会出现设置后padding，border的背景会覆盖上面的元素的内容，下部被当做背景，被下级元素覆盖。二、测试 [html]
复制链接

扫一扫