您的位置: 首页  >  IT文章  >  [疑问]Inline元素的有关问题

[疑问]Inline元素的有关问题

分类: IT文章 • 2023-12-06 15:50:49
[疑问]Inline元素的问题
.container{
	width:350px;
	background-color:#ccc;
}

span.box { 
		display:inline;
		visibility:visible;
		line-height:100px;
		margin:0 100px;
		padding:20px 120px;
		border-top: 5px solid gray;
		border-bottom:5px solid black;
		border-left: 5px solid gray;
		border-right: 5px solid black;
		background-color:gold;
}


<div class="container">
<span>BEFORE</span>
<span class="box">这是中文这是中文这是中文这是中文这是中文</span>
<span>AFTER</span>
</div>

该代码在FF下跟 CHROME下的显示有差别。但问题是：
1. 为什么会被分成是3列显示，每一列里面的文字的个数，是怎么计算出来的？
2. 该inline元素与它前后的元素之间，是怎么安排的？

FF下的显示结果：

[疑问]Inline元素的有关问题

chrome下的显示结果：

[疑问]Inline元素的有关问题

相关推荐