内联元素也是盒子, 前面学习的知识也适用内联元素的盒子模型.

但是内联元素的盒子模型也有其独特的地方.

一. 内联元素的分类

前面我知道, 内联元素没有办法设置宽和高, 其实不是完全正确的, 个别的内联元素是可以设置宽和高的.

常见的内联元素: a、span、img、input、lable、select、strong、textarea

内联元素可以分为替换元素和非替换元素

1.1 什么是替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而<img>只是指向一个图像文件

又如<input>标签的type属性来决定是显示输入框，还是单选按钮等。

1.2 什么是非替换元素

非替换的元素要显示的内容是包含在文档中的.

例如，<span>, <a>等都是非替换元素。 你看到的他们元素中的内容, 就是将来要显示的内容

二. 内联元素的宽和高

一句话总结: 非替换元素不能设置宽和高, 替换元素可以设置宽和高.

如果不设置宽和高, 内联元素在盒子模型中也能看到宽和高, 那么他们的宽和高哪里来的呢?

宽和高是有内容的多少来决定!

替换元素可以设置宽和高. 所以, 对替换元素来说, 宽高, padding, border和margin都和块级元素效果一致.

比如: <img>, <input>都是可以设置宽和高的.

后面主要研究非替换元素的padding, border和margin.

三. 内联元素设置padding

先说结论:

1. 左右padding有效, 而且复合预期(与块级元素效果一样)

2. 上下padding也有效, 但是不复合预期, 因为是他不会影响元素的布局.

<style>
div{
    width : 300px;
    height : 100px;
    background-color : pink;
}
span{
    background-color: yellowgreen;
    padding: 20px 30px;
}
</style>
<div></div>
<span>看看我的padding是否有效果</span>
<div></div>

说明:

• 左右padding可以正常的使用, 上下padding慎用.

四. 内联元素设置border

结论同padding

<style>
div{
    width : 300px;
    height : 100px;
    background-color : pink;
}
span{
    background-color: yellowgreen;
    padding: 20px 30px;
    border: 10px solid #000;
}
</style>
<div></div>
<span>看看我的padding是否有效果</span>
<div></div>

五. 内联元素设置marging

<style>
div{
    width : 300px;
    height : 100px;
    background-color : pink;
}
span{
    background-color: yellowgreen;
    margin: 20px 30px;
}
</style>
<div></div>
<span>看看我的padding是否有效果</span><span>嘿嘿看看我的padding是否有效果</span>
<div></div>

- 内联元素的上下margin失效.

总结:

通过前面我们可以看到, 对非替换元素来说, 左右方向的都好用, 上下方向都不太好用.