行内元素的内边距padding和外边距margin不生效

行内元素的内边距对左、右、下起作用。


行内元素的外边距只对左、右起作用。

<html>
<head>  
    <style type="text/css">  
*{
margin: 0;
padding: 0;
}
.span1{
background: red;
margin: 20px;
}
.span2{
background: red;
padding: 20px;
}
    </style>  
</head>  
<body>  
<span class="span1">设置了margin的行内元素</span>
<span class="span2">设置了padding的行内元素</span>
</body> 
</html>

attachments-2020-07-GaL75d0m5f01e96a62232.png

 

解决方法:

给行内元素加上绝对定位后,行内元素的内边距对左、右、上、下均起作用,外边距也对左、右、上、下均起作用。
<html>
<head>  
    <style type="text/css">  
*{
margin: 0;
padding: 0;
}
.span1{
position: absolute;
background: red;
margin: 20px;
}
.span2{
position: absolute;
left: 250px;
background: red;
padding: 20px;
}
    </style>  
</head>  
<body>  
<span class="span1">设置了margin的行内元素</span>
<span class="span2">设置了padding的行内元素</span>
</body> 
</html>

attachments-2020-07-9xIGHQuT5f01e9774a73f.png

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/432.html