html中對(duì)于換行符占空間的處理方法
發(fā)表時(shí)間：2024-01-02 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]如上圖：parent的width：600px; child1和child2的width：300，display:inline-block; 我們希望它們并排顯示，但為什么會(huì)換行呢？<html lang="en"><head><meta charse...
如上圖：parent的width：600px;
child1和child2的width：300，display:inline-block;
我們希望它們并排顯示，但為什么會(huì)換行呢？
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="transoform.css"></head><body>
<p class="parent">
<p class="child1">1</p>
<p class="child2">2</p>
</p></body></html>.parent{
width:600px;
border: solid;
/* font-size:0; */
}
.child1{
width:300px;
height: 300px;
display:inline-block;
/* font-size:20px; */
line-height: 300px;
text-align: center;
background:#ccc;}
.child2{
width:300px;
height: 300px;
display:inline-block;
/* font-size:20px; */
line-height: 300px;
text-align: center;
background: rgba(230, 32, 32, 0.51);
}因?yàn)樵趆tml中，parent中間有換行空格等等，其實(shí)這些也是占據(jù)空間的；
如何解決？
① 在parent中添加font-size：0；這樣parent內(nèi)的空格換行就不占空間了；但有個(gè)問題，會(huì)發(fā)現(xiàn)child的文字也沒有了，由于font-size默認(rèn)是繼承的；
② 所以第二部就是設(shè)置child的font-size;
以上就是html中關(guān)于換行符占空間的解決辦法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
