margin和padding对行内元素的影响

这个是在面试的时候，面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来

1)inline元素的高度是由元素的内容决定的(字体的大小和行高) 比如你对一个a标签设置它的高度是没有效果的

2)HTML元素分为替换元素和非替换元素 替换元素指的是作为其他的元素占位符的一个元素 例如img   非替换元素指内容包含在文档中的元素  <p>hahaha</p>这个p就是一个非替换元素 区分替换与非替换的方法：替换元素浏览器会根据标签和属性去决定元素的显示 非替换元素是直接将内容显示

进入主题  margin和padding对inline元素的影响 这里我们就要考虑替换元素与非替换元素的区别了

1)margin对inline元素的影响

　　　<p>
        <img src="#" id="a" alt="我是一个替换元素" />
    </p>
    <p>
        <span>我是行内非替换元素</span>
    </p>

我们对上面的元素设置样式

　　　　　p {
            background: red;
            width:400px;
        }

        p img {
            width:100px;
            height:100px;
            background: blue;
        }

        p img#a {
            margin:20px;
        }

        p span {
            margin-top:20px;
            margin-left: 20px;
            margin-right: 20px;
        }

对上面的inline元素img设置了margin  发现四个方向的margin都有了效果

而inline元素span呢 发现只有水平方向的margin产生了效果 垂直方向的没有产生效果

原因在于对行内非替换元素设置margin不会影响行高   margin本身就是透明的 所以margin-top margin-bottom并没有视觉的效果

2)padding对inline元素的影响

同样是考虑对行高的影响  当对一个行内非替换设置padding的时候 padding-top padding-bottom 并不会影响行高所以没有视觉效果

当对行内替换元素设置padding的时候，会发现产生了效果

总结上面的 也就是当我们考虑margin padding对一个inline元素是否会产生视觉效果的时候，要区分对待(行高问题) 替换元素都会产生视觉效果 非替换元素垂直方向不会产生视觉效果 当然你为了让margin 和padding对inline元素产生效果 可以将他们设置成inline-block 这样就会有效果