鍍金池/ 問答/HTML5  HTML/ 關(guān)于CSS布局的問題，請問為什么這兩個(gè)箱子不在同一行？

關(guān)于CSS布局的問題，請問為什么這兩個(gè)箱子不在同一行？

clipboard.png

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>


 <style>
   .outer{
      width:500px;
      height: 500px;
      background: green;
   }

   .outer>div{
       display: inline-block;
   }

   .inner1{

       width:48%;
       height:48%;
       margin: 0 1%;
       background: powderblue;
   }

   .inner2{
       
       width: 48%;
       height: 48%;
       margin: 0 1%;
       background: blue;

   }
 
 
 
 </style>
 
 <body>


    <div class="outer">

           <div class="inner1"></div>
           <div class="inner2"></div>

    </div>
     
 </body>
 </html>

這樣加起來不正好每個(gè)百分之50么，感覺應(yīng)該在一行才對啊

回答
編輯回答
放開她

inline-block:是使元素以塊級(jí)元素的形式呈現(xiàn)在行內(nèi),你的寬度分配雖然剛好把100%分完，但是div之間有“幽靈空白點(diǎn)”,在outer中，添加font-size:0就可以了， 子div可以重新設(shè)置font-size:12px;

2017年4月5日 04:27
編輯回答
黑與白

你想要在一行,可以使用浮動(dòng)float

2017年12月26日 19:04
編輯回答
念舊

寫樣式前先初始化樣式。

2017年2月21日 13:40
編輯回答
我以為

因?yàn)橛玫膶傩詉nline-block。而兩個(gè)DIV之間，存在空格（換行）。所以就超過了100%。刪掉換行，就在一行了！

2017年7月2日 23:36
編輯回答
墨沫

幽靈空白節(jié)點(diǎn)

2017年4月10日 08:53
編輯回答
舊言

很簡單，在一些瀏覽器中，div p ul 等一些元素會(huì)有默認(rèn)的margin和padding值，所以在布局的時(shí)候，首先是要把這些樣式格式化一下，百度參照reset.css

2017年4月5日 08:27
編輯回答
六扇門

我之前連布局的時(shí)候在張鑫旭的博客看到這篇文章，跟上面各位大佬的答案也是八九不離十。今天看到多一個(gè)答案設(shè)置font-size為0，受教了，明天我也試試。
http://www.zhangxinxu.com/wor...

2017年4月12日 19:34
編輯回答
款爺

設(shè)置display:inline-block后變成內(nèi)聯(lián)元素了，然后有“幽靈空白節(jié)點(diǎn)”，你將outer中加一行：font-size:0就可以了

2017年11月23日 06:13
編輯回答
心夠野

這是html文檔規(guī)范中，對文本元素和內(nèi)聯(lián)元素默認(rèn)設(shè)置的一個(gè)字符間隔也就是幽靈空白點(diǎn)，清楚掉這個(gè)默認(rèn)設(shè)置才是剛剛好的寬度等值
https://www.cnblogs.com/guagn...
https://segmentfault.com/q/10...

2017年9月1日 23:05