UC知道CSS的padding属性
来源：百度知道 编辑：UC知道 时间：2024/06/07 20:10:58
<html>
<head>
<title>untitle</title>
<style>
a{
padding:0 0 0 50px;}
.ok{
background:url(images/enlarge.png) no-repeat left center;}
</style>
</head>
<body>
<a class="ok" herf="#">123</a>
</body>
</html>
这是一段例子代码，相信大家也能看到显示效果，我的问题就是.ok类为什么没有继承a的padding属性向右移动50个像素，二十直接显示在了左边，形成了图片和文字链接并排的效果，而不是重叠的效果？
我的意思是，无论margin还是padding，显示效果都应该是左边有50像素的空位嘛
<head>
<title>untitle</title>
<style>
a{
padding:0 0 0 50px;}
.ok{
background:url(images/enlarge.png) no-repeat left center;}
</style>
</head>
<body>
<a class="ok" herf="#">123</a>
</body>
</html>
这是一段例子代码，相信大家也能看到显示效果，我的问题就是.ok类为什么没有继承a的padding属性向右移动50个像素，二十直接显示在了左边，形成了图片和文字链接并排的效果，而不是重叠的效果？
我的意思是，无论margin还是padding，显示效果都应该是左边有50像素的空位嘛
如果要达到你重叠的效果。
那就要用
a{margin： 0 0 0 50px}
a{padding:0 0 0 50px};顺序是上，右，下，左，所以是在左边了，它已经继承了。
向右移50px，a{ padding: 0 50px 0 0};
padding是填充你的原块区
也就是说
你要想让你的块区向右移动
用margin属性
可以参考一下CSS的盒模型
你就能很好的运用定位了
a{display:block;}
加上
因为a是联级元素
不是块级元素
意思 就是
好多 a 可以在一行排了
而块级元素
就是自己换行了
如<div> <p> <table> 等