CSSをインラインブロック空白

Question

私は別のthingsをやってトライが、これlistがinline-block-divの隣にありませんが、ここでは2インラインブロック間の空白を取り除くように見えることはできません。

.parent { 
 
    border: 10px solid red; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    border: 5px solid blue; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>

Answer 1

私はフレックスを使用することをお勧めします。 Flexは開発に非常に便利です。

.parent { 
 
    border: 10px solid red; 
 
    display: flex; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>

Answer 2

あなたは親がそれが宇宙

.parent { 
 
    border: 10px solid red; 
 
    display: flex; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 
</div>

Answer 3

を固定持っているフレキシボックスが実際にHTMLから来ることができます。デフォルトでは、インラインブロック要素にスペースが追加されます。私はあなたが宇宙の戦いを知っていたことを願っていますCSSの別の問題ボックスサイズ：border-boxプロパティを追加するのを忘れていますか？ 75％+ボーダー左幅+ボーダー右幅：

幅を次のように、このプロパティの幅なし

が算出されます。だから最終的にあなたの幅は 75％+ 10pxです。パディングがある場合は、幅がさらに増えます。

div{ 
 
    box-sizing:border-box; 
 
} 
 
.parent { 
 
    border: 10px solid red; 
 
    width:100% 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
    margin-left:-4px; 
 
    border:5px solid blue 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>