display:inline： 使元素变成行内元素（内联），拥有行内元素的特性，即
- 与其他行内元素共享一行；
- 不能修改width、height属性，大小由内容撑开；
- padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效;
常见的有：<span> <a> <strong> <em> <label> <input> <select> <textarea> <img> ...
display:block： 使元素变成块级元素，拥有块级的特性，即
- 独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度;
- 可以修改width、height属性;
- padding、margin四个方向的值设置均有效;
- 常见的有：
<div> <p> <h1-h6> <ol> <ul> <dl> <table> <blockquote> <form>
display:inline-block： 使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素），即
- 与其他行内元素共享一行；
- 可以修改width、height属性；
- padding、margin四个方向的值设置均有效;
- 若想解决inline-bloak元素间隙的问题，可在父元素加一个**font-size：0;**属性即可解决；
最后
以上就是可爱墨镜最近收集整理的关于HTML元素的display: inline、block和inline-block的全部内容，更多相关HTML元素的display:内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复