1. 程式人生 > >Div標簽使用inline-block有間距

Div標簽使用inline-block有間距

gin class pla adding 設置 pre body play splay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
        .c1{
            width: 249px;
            height: 1000px;
            background-color: gray;
            display
: inline-block; } .c2{ width: 900px; height: 1000px; background-color: red; display: inline-block; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div><!-- 註意觀察這裏的變化
--> </body> </html>

兩個div設置行內塊屬性,內外邊距已經設置為0了,但是兩個div之間為什麽還有間隙呢?修改如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
        .c1{
            width
: 249px; height: 1000px; background-color: gray; display: inline-block; } .c2{ width: 900px; height: 1000px; background-color: red; display: inline-block; } </style> </head> <body> <div class="c1"></div><div class="c2"></div><!-- 註意觀察這裏的變化 --> </body> </html>

將body中的連個div設置為一行就可以了。

Div標簽使用inline-block有間距