Question

我遇到一些HTML元素的问题。我在<header>标签中有一个图像和一个标题 - 它们应该彼此独立移动，但是当我使用margin-top属性将img元素向下移动40px时，标题似乎会向下移动40px 。所以我添加margin-top: -20px;来重新启动它，它似乎保持不变。

这是我的代码：

标题文件：

<div class="page">
    <header>
    <div class="titlesec">
    <img class="circular" src="themes/default/image.jpg" />
            <a class="logo" href="<?php echo base_url(); ?>">
                <?php echo site_name(); ?>
        </a>
    </div>

    <div class="split"></div>
</header>

页脚文件：

<footer>
        <p>&copy; Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>

和我的css：

.page {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

.logo {
    font-family: 'Helvetica Neue';
    font-weight: 100;
    font-size: 56px;
    text-decoration: none;
    color: #555555;
    margin-top: -20px;
}

.split {
    height: 1px;
    background-color: #CCCCCC;
}

.circular {
    margin-top: 40px;
    width: 80px;
    height: 80px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

.titlesec {
    height: 150px;
}

非常感谢任何帮助！

Answer 1

img和a是内联代码。这意味着他们在同一条线上。添加margin-top会操纵这一行，并因此影响它们。

根据您想要做的事情，您可以通过使用自己的div来区分这两个元素来解决这个问题。然后你可以独立设置div的样式。也许这些div上的浮动也派上用场。

Answer 2

关闭“页面”DIV。看来您没有正确关闭html标签。

HTML元素彼此包含在一起

2 个答案: