php - HTML 元素相互包含

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 上的 float 也能派上用场。