私はどこからも余分なスペースがあります

htmlとcssを使っていくつかの写真を並べています。何らかの理由でコンテナdivの後に余分な空きスペースが増えています。私は本当にいくつかの助けに感謝します！私はどこからも余分なスペースがあります

このプロジェクトは現在、ライブホストされており、ここで見つけることができます：My Project

body { 
 
    margin: 0; 
 
} 
 
#mixtape { 
 
    -ms-zoom: 0.25; 
 
    -moz-transform: scale(0.25); 
 
    -moz-transform-origin: 0 0; 
 
    -o-transform: scale(0.25); 
 
    -o-transform-origin: 0 0; 
 
    -webkit-transform: scale(0.25); 
 
    -webkit-transform-origin: center top; 
 
    display: inline-block; 
 
    height: 0; 
 
} 
 
#case { 
 
    position: relative; 
 
    top: -15px; 
 
    left: 15px; 
 
    z-index: 1; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
#shadow { 
 
    position: relative; 
 
    top: -836px; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
#disk1 { 
 
    position: relative; 
 
    top: -1548px; 
 
    left: 150px; 
 
    z-index: 0; 
 
    animation: disk 8s infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
#disk2 { 
 
    position: relative; 
 
    top: -1548px; 
 
    left: 255px; 
 
    z-index: 0; 
 
    animation: disk 8s infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
@keyframes disk { 
 
    from { 
 
    -ms-transform: rotate(0deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(0deg); 
 
    /* Safari */ 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -ms-transform: rotate(360deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(360deg); 
 
    /* Safari */ 
 
    transform: rotate(360deg); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Mixtape</title> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
 
    <!--ubuntu font--> 
 
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="mixtape"> 
 
    <img src="case.svg" id="case"> 
 
    <img src="shadow.svg" id="shadow"> 
 
    <img src="disk.svg" id="disk1"> 
 
    <img src="disk.svg" id="disk2"> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-12-29 Mike Peterson

あなたは何を期待していますか？ _-webkit-transform-origin：center top; _ あなたのCSSでは、それはまさにそれが起こっているものです –

私は、彼らは、タグ内に配置されている場合、それが原因でSVGsの奇妙なレンダリングのだと思います。代わりに固定サイズのインラインSVGを試してみることをお勧めします。今はimgタグのように動作していますが、フルサイズのSVGと同様にスペースを保存しています。

出典

2016-12-29 09:55:51

jsfiddleに貼り付けたときにコードが正常に動作しているように見えました。おそらく他にも何か影響があります。

1）#mixtape相対して）その親への絶対（その子供たちは絶対に置き：

それにもかかわらず、私は助けるかもしれないいくつかの変更がなされてきました。

2）ディスクが2つあり、topとleftのプロパティだけが異なるため、.diskクラスをDRYコードに追加しました。

body { 
 
    margin: 0; 
 
} 
 
#mixtape { 
 
    -ms-zoom: 0.25; 
 
    -moz-transform: scale(0.25); 
 
    -moz-transform-origin: 0 0; 
 
    -o-transform: scale(0.25); 
 
    -o-transform-origin: 0 0; 
 
    -webkit-transform: scale(0.25); 
 
    -webkit-transform-origin: center top; 
 
    height: 0; 
 
    display: block; 
 
    position: relative; 
 
    margin: 10px auto 0px; 
 
} 
 
#case { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 15px; 
 
    z-index: 1; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
#shadow { 
 
    position: absolute; 
 
    top: 15px; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
.disk { 
 
    position: absolute; 
 
    z-index: 0; 
 
    animation: disk 8s infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
#disk1 { 
 
    top: 146px; 
 
    left: 151px; 
 
} 
 
#disk2 { 
 
    top: 146px; 
 
    left: 734px; 
 
} 
 
@keyframes disk { 
 
    from { 
 
    -ms-transform: rotate(0deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(0deg); 
 
    /* Safari */ 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -ms-transform: rotate(360deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(360deg); 
 
    /* Safari */ 
 
    transform: rotate(360deg); 
 
    } 
 
}

<body> 
 
    <div id="mixtape"> 
 
    <img src="http://mkitgreat.com/mixtape/case.svg" id="case"> 
 
    <img src="http://mkitgreat.com/mixtape/shadow.svg" id="shadow"> 
 
    <img src="http://mkitgreat.com/mixtape/disk.svg" class="disk" id="disk1"> 
 
    <img src="http://mkitgreat.com/mixtape/disk.svg" class="disk" id="disk2"> 
 
    </div> 
 
</body>

出典

2016-12-29 10:44:49 Brad

皆さん、ありがとうございました！したがって、#mixtapeディビジョンに含まれるすべての要素の位置を設定した後、#mixtapeはもはや中央揃えされません。どちらのマージンも：autoでもtext-alignでも：トリック、アイデアを中心にしていますか？ –

ちょっと@MikePeterson私は自分の答えを編集しました。 #mixtapeを変更してdisplay：blockを追加しました。位置：相対; マージン：10ピクセル自動0ピクセル; – Brad

@MikePetersonまた、私のソリューションがあなたのために働いていれば、答えとして受け入れていただければ幸いです – Brad

代わりの内部要素に対して位置を設定します。外側のdivに相対的な位置を設定し、他のすべての要素をposition：absoluteに設定してみてください。

位置の相対値は、通常、配置されている要素を含むために使用されます。

要素が通常絶対配置されている場合。ページ全体に配置されています。

その要素が相対要素の内部にある場合。その要素内に配置されます。

これはあなたのスペースの問題を解決します。

なぜ、それは非常に多くのスペースを作成していますか。上記の答えと同じです。 SVGは、DOMが特定の高さでそれを検出する方法でレンダリングしています。したがって、それはその高さのために「部屋を作る」。

あなたがここにあなたのページを見れば：それはどのようにビッグに http://mkitgreat.com/mixtape/case.svg

ルック。あなたがページでレンダリングしたものと比較します。イメージのサイズを変更することは賢明でしょう。

出典

2016-12-29 14:03:57

回答ありがとうございました。私は、余分な空白を除去することができた相対的であることとは対照的に、親への絶対的であることが含まれる要素の位置を設定することにより

：

#case{ 
    position:absolute; 
    ...

Iはまたによって全体ミックステープをセンタリングすることができましたトランスフォームの原点を中央に設定する：

#mixtape{ 
    -webkit-transform: scale(0.25); 
    -webkit-transform-origin: center top; 
    ...

出典

2016-12-31 08:38:30

私はどこからも余分なスペースがあります

答えて

関連する問題