代码:
<div
id="theMainDiv"
style="
border:solid 1px gray;
cursor:text;
width:400px;
padding:0px;"
>
<span
id="tag1_outer"
style="
background:#e2e6f0;
padding-right:4px;
padding-left:4px;
border:solid 1px #9daccc;
font:normal 11px arial;
color:#3c3c3c"
>as</span>
</div>
Run Code Online (Sandbox Code Playgroud)
现在渲染时,跨度对齐div的左下角.
首先,让我们看一段代码:
div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7; }Run Code Online (Sandbox Code Playgroud)
<div><span>123<br>456<br>789<br>000</span></div>Run Code Online (Sandbox Code Playgroud)
为什么是span的line-height未使用的?
将line-height仍然是200px,但是当我们设置span的display属性inline-block时,line-height的span使用?
见下文:
div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }Run Code Online (Sandbox Code Playgroud)
<div><span>123<br>456<br>789<br>000</span>Run Code Online (Sandbox Code Playgroud)