面试官:span能设置margin和padding吗？
我:span啊,span是行内元素，不能设置height和width，啥margin?这个嘛....

行内元素

官话:一个行内元素只占据它对应标签的边框所包含的空间。
白话:行内元素会一个接一个的排在一起。

<style>
    body{
        margin: 0;
        height: 0;
        }
    .box{
      background-color:  rgb(159, 159, 235);
        }
</style>
<body>
    <span class="box">行内元素1</span>
    <span class="box">行内元素2</span>
    <span class="box">行内元素3</span>
</body>

此处心细的同学就会注意到，span之间怎么会有个白色的间距。

间距是行内元素之间在换行时会产生一个换行符号，然后会占用一定的宽度.如何解决呢?

    <span class="box">行内元素1</span><span class="box">行内元素2</span><span class="box">行内元素3</span>

优雅一点的写法就是给父容器的字体设为0，子容器重新设置字体。

body{
font-size:0
}
.box{
font-size:16px
}

行内元素加上padding和margin

.box{
      background-color:  rgb(159, 159, 235);
      margin: 50px;
      padding: 50px;
    }

从效果图来看左右下的margin和padding是生效的,上的margin和padding是失效的，真的是这样吗？

<span class="box">行内元素1</span>
<span class="box">行内元素2</span>
<span class="box">行内元素3</span>
<div>不对不对不对不对不对不对不对</div>

将span换成img

行内元素的水平方向上的margin和padding是有效的，垂直方向上会显示出效果，但是高度不会撑开，不会对周围元素有影响(行内可替换元素除外)

给行内元素加上宽度和高度

 .box{
      background-color:  rgb(159, 159, 235);
      height: 500px;
      width: 500px;
    }

行内元素设置高度和宽度没有效果(行内可替换元素除外)

行内可替换元素

可替换元素:内容不受当前文档的样式的影响，CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容.
img,input即属于行内元素又属于可替换元素,padding,margin,height,width都有效。

<style>
    body {
        margin: 0;
        padding: 0;
    }
    img {
        padding: 50px;
        margin: 50px;
        height: 200px;
        width: 200px;
    }
</style>
<body>
    <img src="http://img.hbs520.xyz/inline/miao.webp"alt="">
    <img src="http://img.hbs520.xyz/inline/miao.webp"alt="">
    <div>啊对对对对对对对</div>
</body>

常见的行内元素有哪些?

span img button input i textarea select label

块级元素

官话:块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。
白话：块级元素会单独占一行。

<style>
     body{
        margin: 0;
        padding: 0;
    }
    .box{
      background-color:  rgb(159, 159, 235);
      margin: 10px;
      padding: 10px;
      width: 40px;
      height: 30px;
    }
</style>
<body>
<div class="box">块级元素1</div>
<div class="box">块级元素2</div>
<div class="box">块级元素3</div>
</body>

块级元素margin,padding,width,height都有效

常见的块级元素

div ul li h1-h6 ol p form aside header footer

[灵魂拷问]面试官:span能设置margin和padding吗？