1

我正在尝试制作网页，但在使用 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

您需要从.header h1标签中删除边距 - 而不是您的margin-left:100px;try margin: 0 0 0 100px。此外，一些浏览器会将上边距放在 p 标签上，因此您可能也想重置该边距。

您不能添加padding或添加background-color到您的图像标签

如果您有 chrome，请尝试使用内置的 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

默认情况下， the<h1>和 the<p>都有边距，这可能会导致您看到的空间出现。添加这个 CSS 应该可以修复它：

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

改变元素位置的边框是一个单独的问题，是由于称为“边距折叠”的东西，StackOverflow 上其他地方的这个问题的答案已经很好地解释了：添加 CSS 边框更改 HTML5 网页中的位置。

对此的解决方案是向.header元素添加顶部填充以补偿折叠的边距：

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

试试这个你的图像有宽度100px和填充5+5所以尝试添加左110px而不是70px... 编辑

添加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 回答
0

试试这个！！

<!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"; letter-spacing: 1.2px; background-color: pink;}
            .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; background-color: lime;}
        </style>
    </head>
    <body>
        <div class = "container" >
            <div class = "header"">
                <img src = "http://thecontentwrangler.com/wp-content/uploads/2011/08/User.png" alt = "logo" width = "100" height = "100"></img>
                <div>
                <h1> Website name </h1>
                <p><strong>- Tagline ,if any, goes here</strong></p>
                </div>
            </div>
        </div>
    </body>
</html>
于 2013-05-29T11:01:24.740 回答