2016-07-20 5 views
1

円形イメージはposition: relativeで、bottom: 90pxプロパティを使用して上に移動しました。現在の状況の画像:1つの要素が相対的に配置されている場合、要素間にスペースがあるのはなぜですか?

enter image description here

下の2つの<h1>タグのCSSも提供されます。これは、相対的な配置プロパティのいくつかの注意点ですか?

相対的な位置の変化がない位置が境界であるかのように動作しています。

これは、相対的な再配置することなく、次のようになります。

enter image description here

できますか?

CSS:(ヘッダーには名前がテキスト(H4)で、ラッパー、紙、タイトルが大きくH1であり、そして絵は、円形の絵です。)私は、右下のヘッダを配置しようとしている

画像を相対的な位置にする必要はありません。

.content-header { 
 
    //height: 200px; 
 
    width: inherit; 
 
    text-align: center; 
 
    background-color: #547980; 
 
    border-top-left-radius: inherit; 
 
    border-top-right-radius: inherit; 
 
    border-bottom: solid #9DE0AD 4px; 
 
} 
 
.content-picture { 
 
    display: inline-block; 
 
    border-radius: 100%; 
 
    height: 150px; 
 
    width: 150px; 
 
    position: relative; 
 
    bottom: 80px; 
 
    border: 8px solid white; 
 
} 
 
.Paper-Title { 
 
    font-size: 5vw; 
 
    text-align: center; 
 
    padding-top: 10px; 
 
    margin: 0px; 
 
    padding: 20px 20px 0px 20px; 
 
    color: #9DE0AD; 
 
} 
 
.Name { 
 
    text-align: center; 
 
    font-size: 2.7vw; 
 
    margin: 0px; 
 
    width: 100%; 
 
    padding: 10px 0px 20px 0px; 
 
    color: #9DE0AD; 
 
    font-weight: lighter; 
 
}

答えて

関連する問題