マージン - リンク領域

Question

からマージンを排除する必要性私はこのJSFiddleを持っている：https://jsfiddle.net/96urhqcz/

4列のdivがあります - HTMLは次のようになります。

<div class="g-1-4 app"> 
    <a style="text-decoration:none;" href="https://link1/"> 
    <div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app"> 
     <i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i> 
     Link Number 1 
    </div> 
    </a> 
    </div> 

    <div class="g-1-4 app"> 
    <a style="text-decoration:none;" href="https://link2/"> 
    <div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app"> 
     <i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i> 
     Link Number 2 
    </div> 
    </a> 
    </div> 

    <div class="g-1-4 app"> 
    <a style="text-decoration:none;" href="https://link3/"> 
    <div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app"> 
     <i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i> 
     Link 3 
    </div> 
    </a> 
    </div> 

    <div class="g-1-4 app"> 
    <a style="text-decoration:none;" href="https://link4/"> 
    <div style="margin:10px; padding: 30px 0px; background:#00838F" class="app"> 
     <i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i> 
     Link 4 
    </div> 
    </a> 
    </div> 

CSSについては、 G-1-4のようになります。

.g-1-4{ 
    width: 25%; 
} 

あなたがJSFiddleで見ることができるように - ボックス間のマージンを適切なボックスに「リンク」されています。

最終的に私は4層レイアウトをしようとしていますが、余白はではなくにリンクされています。ユーザーがボックスの間にマウスを置くと、クリック可能でない通常のマウスになります。

私はそれが本当にシンプルなものだと確信しています - しかし、私はそれを修正するように見えることはできません。

ご意見やご提案はありますか？

Answer 1

<div>のマージンをとり、divをラップする<a>に追加します。 <a>にもstyle="display:block:"を追加します。

This CodePen has the updates.

Answer 2

は、あなたは彼らがautomaticaly が「結合」されていないスペースで表示されます、あなたのdivに一定の幅を設定し、フレキシボックスを使用することができます。

この小さなコードがお役に立てば幸いです。

.flex { 
 
    display : flex; 
 
    justify-content : space-around; 
 
} 
 

 
.div1, .div3 { 
 
    width : 120px; 
 
    height : 120px; 
 
    background-color : red; 
 
} 
 

 
.div2, .div4 { 
 
    width : 120px; 
 
    height : 120px; 
 
    background-color : blue; 
 
} 
 

 
p { 
 
    margin : 0; 
 
    color : white; 
 
    line-height: 120px; 
 
    font-size : 12px; 
 
    text-align : center; 
 
}

<div class="flex"> 
 

 
    <a href="#" class="div1"> 
 
    <p>LINK 1</p> 
 
    </a> 
 
    
 
    <a href="#" class="div2"> 
 
    <p>LINK 2</p> 
 
    </a> 
 
    
 
    <a href="#" class="div3"> 
 
    <p>LINK 3</p> 
 
    </a> 
 
    
 
    <a href="#" class="div4"> 
 
    <p>LINK 4</p> 
 
    </a> 
 

 
</div>

Answer 3

何が起こっているリンク要素を使用して、タグに特定の幅を設定することができますかあなたには、いくつかを追加することができ、いくつかのスペースを取得するために、コンテナのdivの100％に拡大しているということですコンテナ要素へのパディングを行うには、パディングと幅を使って見栄えを良くする必要があります。

https://jsfiddle.net/96urhqcz/1/

.g-1-4{ 
    width: 25%; 
    padding: 10px; 
} 

Answer 4

問題は、テーブルセルの表示方法を使用してから来ています。

私はまた、ルイが指摘しているフレックスボックスの使用法もサポートしています。