CSS中block、inline和inline-block

CSS中block、inline和inline-block

---

block

• block是将元素显示为块级元素，每次都是与其他元素从新行开始排布
• block可以设置块的行宽行高，同时还有margin、padding等基本属性
• 典型的块级元素标签有：<div> <p> <label> <h1> <form> <table>等标签

---

inline

• inline是将元素显示为行内元素，每次都是与其他元素从同一行进行排布
• inline不可以设置元素的宽度高度，以及margin和padding等基本属性
• 典型的inline元素标签有：<span> <b> <a> <image> <input> <strong>等标签

---

inline-block

• inline是将元素当作行内元素显示，但是本质是块级元素
• inline可以设置其行宽行高，以及margin和padding等基本属性

---

总结

一般而言，block、inline和inline-block可以互相转换，根据不同的显示方式来设置不同的展示类型：

• 是否想要排布在同一行来决定选择block还是inline
• 是否需要自己手动设定行宽行高以及margin、padding来选择block还是inline
• 如果既想排布显示成同一行，又想手动设置行宽行高以及margin、padding等基本属性，选择inline-block

---

本人是更倾向于自己手动布局，更易于控制布局，但因为是初学者，这样的见识可能尚早，以后若有新的认识，再回来修改自己的见解。