私のイメージが私のモーダル全体をカバーしていないのはなぜですか

Question

私はイメージビューアとしてモーダルを使用しています。具体的には、CSS http://materializecss.com/です。ユーザーがボタンをクリックすると、モーダルが開きます。モーダルにはimage要素があります。私は高さと幅の両方を100％に設定しましたが、私のイメージがカバーしていない底にまだラインが残っている理由を理解できません。

<div id="modal1" class="modal"> 
    <a id="closeIcon"><i class="fa fa-times-circle fa-2x"></i></a> 
    <img class="responsive-img" id="roomImage" src=""> 
</div> 

#roomImage{ 
    width: 100% !important; 
    height: 100% !important; 
} 

Answer 1

このcssをカスタムsytlesheetに追加してください。これは期待どおりに動作するはずです。

CSS

.modal { 
    background-color: transparent; 
    padding: 0; 
    max-height: 100%; 
    width: 55%; 
    margin: auto; 
    overflow-y: hidden; 
    border-radius: 2px; 
} 

.z-depth-4, .modal { 
    box-shadow: none; 
} 

Answer 2

は、ここで私は常にウェブサイトを開始するために使用したい何か。これはシンプルなCSSスニペットですが、それは不思議に過ぎません。

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { 
    margin: 0; 
    padding: 0; 
} 

私は初めてジキルでこれを見ました。それは単純なようですが（それはそうですが）、width: 100%とheight: 100%が実際に行うべきことを行うように、すべての基本要素をリセットします。