css父子元素之间padding的设置区别是什么？

问题描述

问 题

作为学前端的新人，在自学过程中经常会碰到一些问题。以下代码主要实现了一个宽度自适应button。
在自学看博客的时候，看到一段代码不理解，不明白的问题主要有：
1）btn1的padding-left：3px 和 btn子元素cite的padding：0 13px 0 10px 想要达到什么效果？(如果是让文字左右padding为13，为什么不把cite的padding设置为0 13px 0 13px?分开写的用意是什么？)
2）btn1和cite的background都设置为同一张图片有什么用意？
3）我知道btn1设置为inline-block是为了让多个同类型的button排在一行，但是cite元素必须设置为block？(cite是inline box,也是可以设置左右padding和margin的，虽然垂直方向上的padding和margin不会推开其上下的inline box元素)

CSS代码如下：
.btn1{display:inline-block; background:url(http://www.zhangxinxu.com/stu... no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/stu... no-repeat right top;}

HTML代码如下：
&lta href="javascript:void(0);" class="btn1"&gt<cite>inline-block方法</cite>&lt/a&gt

效果如下：

解决方案

第一个问题:

padding一共有四个值上下左右。
写法为分别是padding-left、padding-right、padding-top、padding-bottom
这样写对于新手的好处就是不容易出错，因为我想给谁设置就写出对应的方向即可,在设置单个方向的值可以考虑这样写。缺点就是增加代码冗余;

第二种方式:padding: top right bottom left;

当你设置四个值的时候它遵循上右下左的顺序;
    eg:padding:10px 15px 20px 25px; === padding-top:10px;padding-right:15px;padding-bottom:20px;padding-left:25px;
当你设置三个值的时候,它遵循上左右下,
    eg:padding:10px 15px 20px; === padding-top:10px;padding-left:15px;padding-right:15px;padding-bottom:20px;
当你设置两个值的时候，它遵循的上下左右，
    eg:padding:10px 15px; === padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;
    当你设置一个值的时候，它遵循上右下左的每个值都一样
    eg:padding:10px; === padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;
   以上是你第一个问题

第二个问题:

关于background的背景图设置也有很属性,例如:background-repeat表示背景图是否重复,background-color表示背景色background-position表示背景图应该从什么位置出现,background-image表示背景图等等；这些你都可以在http://www.w3school.com.cn/查看,每个属性都有详细的介绍。background也可以简化着写。
eg:.btn{
        background:url(./images/1.jpg) no-repeat left top;
    }
表示把1.jpg从类名为btn的左上角开始平铺,而且还不重复

第三个问题:

你的第三个问题牵扯到行元素标签和块元素标签的特点和区别,这也是新手最容易弄混的地方,
举个例子:div属于块元素,默认情况下独立占一行,可以设置宽高。若想让两个div站同一行可以这样设置:float:left、position、width、或者通过display属性修改。行元素标签默认状态是没有margin-top和margin-bottom
span属于行元素标签,默认情况下所有span都排在一行,不可以设置宽高,只有在当前页面排不下的情况下才会排到下一行。若想独立占一行,可以设置float、position、display。
display常用的四个属性值有none、block、inline、inline-block
    display:none  让当前盒子隐藏
    display:block  让当前盒子呈现块元素的特性或者是显示状态(具体看你怎么用)
    display:inline 让当前盒子以行元素的特性显示
    display:inline-block 让当前盒子既具有行元素的特性,又具有块元素的特性。
    
   我也觉得你应该把排版整齐点，这样阅读比较方便。望采纳！
    

这篇关于css父子元素之间padding的设置区别是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！