2016-07-19 10 views
1

メインラッパーdiv内にコンテンツdivがあります。私は、コンテンツのdivに0からmargin-rightpaddding-rightの両方を設定して、まだクロムはまだそれはラッパーのdivの終わりまで伸びを示し、でもそれを少し渡さ:余白と余白right 0、そうでない場合はクロムが表示されます

div

私がしようとしていますなぜこれが理解できますか?外側と内側のdivのためのCSSは次のようになります。

#Inner { 
    position: relative; 
    width: 40%; 
    height: 70%; 
    top: 3%; 
    margin-left: 2%; 
    margin-right: 0; 
    padding-right: 0; 
    text-align: center; 
} 
#outer { 

    height:80vh; 
    width:50vw; 
    position:absolute; 
    border-radius:5%; 
    border:3px solid black; 
    left:50%; 
    transform:translate(-50%, 0); 
    top:10%; 
    background: linear-gradient(to bottom, #304352, #525252); 
} 

はクロームで行うには、このだけで何かですか内部のdivは本当にこれまで延ばすん、でもラッパーを渡しますか?

+3

実際にはマージンではありませんが、色づけには意味がありますが、空白は何か...浮動小数点、表示:インラインブロックなどがなければ、divはそのスペースをブロックレベルの要素は100%の幅であるため、「使用」していませんが、widthプロパティだけを設定しても、その領域が他の要素で使用できるようにはなりません。最も技術的な説明ではありませんが、うまくいけば助かります。 – ryantdecker

+0

それは意味があります、よかったです。どのタイプのディスプレイを試してみるべきかアドバイスしていますか? – MarksCode

+0

は、達成しようとしていることに完全に依存します。右のスペースに何か他のものがある場合は、両方のオブジェクトの 'display:inline-block'または' display:block'と 'float'の両方を使う必要があります。あなたがそのスペースを埋めるのに何も必要ないなら、あなたはそのdivのための 'display 'として何を設定するかは本当に重要ではありません。 – ryantdecker

答えて

1

少しの研究の末、displayというプロパティを追加すると、inline-blockのプロパティが正しいマージンを取り去ってしまったようです。ブロックモデルについてもっと理解していると思います。

関連する問題