明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html中對于換行符占空間的處理方法

發(fā)表時間：2024-05-13 來源：明輝站整理相關軟件相關文章人氣：

[摘要]如上圖：parent的width：600px; child1和child2的width：300，display:inline-block; 我們希望它們并排顯示，但為什么會換行呢？<html lang="en"><head><meta charse...


這里寫圖片描述
如上圖：parent的width：600px;
child1和child2的width：300，display:inline-block;
我們希望它們并排顯示，但為什么會換行呢？

<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);
  }

因為在html中，parent中間有換行空格等等，其實這些也是占據(jù)空間的；

如何解決？
① 在parent中添加font-size：0；這樣parent內(nèi)的空格換行就不占空間了；但有個問題，會發(fā)現(xiàn)child的文字也沒有了，由于font-size默認是繼承的；
② 所以第二部就是設置child的font-size;
修改后如圖

以上就是html中關于換行符占空間的解決辦法的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。