div 配搭 display:inline-block
阿新 • • 發佈：2017-08-18
letter body function .com lan 容器 pac png har
以下代碼會出現這樣的情況
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link href="css/fontsStyle.css" rel="stylesheet" type="text/css" /><script type="text/javascript"> function add(){ var group = $(‘.group‘); group.append(‘<div class="imageContainer"></div>‘); } </script> </head> <body> <input type="button" onclick="add()" value="add"> <div class="group"> <div class="imageContainer" ></div> <div class="imageContainer" ></div> <div class="imageContainer" ></div> </div> </body> <style> .group{ /* border-radius: 6px; */ border:1px solid green; width: 800px; height: 800px; /* padding: 10px; */ /* letter-spacing: -6px; */ } .imageContainer{ /* border-radius: 6px; */ border:1px solid green; width: 148px; height: 148px; /* margin-left: 8px; margin-top: 8px; */ display:inline-block; } </style> </html>
這裏會出現兩種情況，1.就是代碼裏面手動添加的，兩個div之間存有空隙，2.是通過函數添加的，沒有帶空隙
為什麽會出1的情況呢？這就是因為div被添加時，默認給了一個空格，那個怎樣消除這個空格呢？在網上找到了4種方法，這裏就不一一介紹了，因為其中3種都是不太好的方法，所以這裏就介紹其中一個種不叫多人使用的，就在最外層容器種，就是group中添加一個css, letter-spacing: -6px; 這個就是字體與字體之間的空隙，這裏的空隙大小是6px，這個要根據實際使用的過程中字體的樣式來決定空隙是去多大一般都是4px
div 配搭 display:inline-block