html页面布局

display:元素的显示方式
black:块元素
inline-block:行内块元素（内联块元素）
none:无（隐藏）,不单单是视觉上的，页面布局中也彻底消失，不占位置

块元素：独占一行，可以设置宽高以及内外边距。
行元素：只占内容大小的区域，不可以设置宽高和内外边距。
块元素具备盒模型的属性。
行元素不具备盒模型的属性。

消除inline-block导致的元素间隔的方法：
方法1：删除标签之间的空格和换行
缺点：代码可读性差
方法2：将父元素的字体大小设置为0px
缺点：通过继承性，也会影响自身的字体大小；同时可能导致布局混乱（em之类参考父元素字体的值无法使用）
方法3：给父级（-6px）和自身（0px）设置词间距或字母间距
缺点：需要给每一个元素设置，计较繁琐
方法4：删除掉闭合标签（不推荐使用）

.bt{
	width: 200px;
	height: 200px;
	border: 2px solid;
	display: inline-block;
	transition: all 2s;
	font-size: 16px;
	word-spacing: 0px;
}
body{
	/*font-size: 0px;*/
	word-spacing: -6px;
}

来源：CSDN

作者：前端小布丁

链接：https://blog.csdn.net/weixin_46191548/article/details/104115709