1

Web ページを作成しようとしていますが、CSS を使用して特定の HTML 要素を配置するのに問題があります。以下は私が書いたコードです：

<!DOCTYPE html> 
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "description" content = "This is the homepage of this website">
        <title>Home</title>
        <style>
            body{margin-top: 0px; background-color: #FBFBFB;}
            .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; }
            .header img{float: left; padding: 5px; background-color: orange;}
            .header h1{font-size: 40px; font-family: "lucida console"; margin-left: 100px; letter-spacing: 1.2px; background-color: pink;}
            .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; position: relative; top: 0px; left: 70px; background-color: lime;}
        </style>
    </head>
    <body>
        <div class = "container" >
            <div class = "header">
                <img src = "a.png" alt = "logo" width = "100" height = "100"></img>
                <h1> Website name </h1>
                <p><strong>- Tagline ,if any, goes here</strong></p>
            </div>
        </div>
    </body>
</html>

これは私が得ている出力です

ここに画像の説明を入力

キャッチフレーズの部分をウェブサイト名に近づけたいので、パディングとマージンを 0px に変更しようとしましたが、うまくいきませんでした。これどうやってするの ？さらにボーダーを入れるとこんな感じ

.header{border: 1px solid black;}

以下のスクリーンショットに示すように、画像を一番上に移動します ここに画像の説明を入力

なぜこうなった ？

4

4 に答える 4

2

try.header h1の代わりに、タグからマージンを削除する必要があります。また、一部のブラウザーは p タグにトップ マージンを設定するため、そのマージンもリセットする必要がある場合があります。margin-left:100px;margin: 0 0 0 100px

イメージタグにpaddingまたはを追加することはできませんbackground-color

クロムを使用している場合は、組み込みの dom インスペクター (右クリックして要素を検査) を使用してみてください。要素で何が起こっているかが表示されます。

私はあなたのhtmlを個人的に再構築して、次のようにします：

    <div class = "container" >
        <div class = "header">
            <div class="imageHolder"><img src = "http://lorempixel.com/100/100" alt = "logo" /></div>
            <div class="textHolder">
                <h1> Website name </h1>
                <p><strong>- Tagline ,if any, goes here</strong></p>
            </div>
        </div>
    </div>

そして、次のスタイルを使用できます。

body{margin-top: 0px; background-color: #FBFBFB;}
.container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; }
.header .imageHolder {float: left; width:110px; background-color: orange;}
.header .imageHolder img {margin:5px;}
.header .textHolder {float:right; width:1090px;}
.header h1{font-size: 40px; font-family: "lucida console"; letter-spacing: 1.2px; background-color: pink; margin:0;}
.header p {margin:0; color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; position: relative; background-color: lime; margin-left:-30px; width:1120px;}

http://jsfiddle.net/peteng/XJVW3/

于 2013-05-29T10:52:35.830 に答える
2

<h1>と の両方に<p>デフォルトでマージンがあり、表示されるスペースが表示される可能性があります。この CSS を追加すると、修正されるはずです。

.header h1 {margin:0 0 0 100px;}
.header p {margin:0;}

要素の位置を変更する境界線は別の質問であり、 StackOverflowの他の場所でこの質問への回答が既によく説明している「マージンの崩壊」と呼ばれるものによるものです。

これに対する解決策は、要素に上部パディングを追加し.headerて、折りたたまれたマージンを補うことです。

.header {padding-top:30px;}
于 2013-05-29T10:53:07.580 に答える
0

これを試して、画像に幅100pxとパディングがあるので、代わりに5+5左を追加してみてください... edit110px70px

margin-top: 0px; header pとの間のスペース.header h1 margin-bottom: 0px;を削除するp and h1

<!DOCTYPE html> 
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "description" content = "This is the homepage of this website">
        <title>Home</title>
        <style>
            body{margin-top: 0px; background-color: #FBFBFB;}
            .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; }
            .header img{float: left; padding: 5px; background-color: orange;}
            .header h1{font-size: 40px; font-family: "lucida console"; margin-left: 100px; margin-bottom:0px; letter-spacing: 1.2px; background-color: pink;margin-bottom: 0px;}
            .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px;  top: 0px; margin-left: 110px; background-color: lime;margin-top: 0px;}
        </style>
    </head>
    <body>
        <div class = "container" >
            <div class = "header">
                <img src = "a.png" alt = "logo" width = "100" height = "100"></img>
                <h1> Website name </h1>
                <p><strong>- Tagline ,if any, goes here</strong></p>
            </div>
        </div>
    </body>
</html>
于 2013-05-29T10:56:46.997 に答える