HTML 元素相互包含答案

【问题标题】：HTML elements are contained to each otherHTML 元素相互包含
【发布时间】：2014-06-16 07:55:13
【问题描述】：

我遇到了一些 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;
}

非常感谢任何帮助！

【问题讨论】：

标签： php html css

【解决方案1】：

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

根据您想要做什么，您可以通过用自己的div 包围这两个元素来解决这个问题。然后你可以独立地设置 div 的样式。也许这些 div 上的浮点数也能派上用场。

【讨论】：

【解决方案2】：

关闭您的“页面”DIV。您似乎没有正确关闭您的 html 标签。

【讨论】：

哎呀 - 抱歉忘了说这是头文件，有一个带有结束 div 的页脚文件