HTML元素彼此包含

Question

I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.

Here's my code:

The header file:

<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>

The footer file:

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

and my 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;
}

Any help is appreciated immensely!

Answer 1

img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.

Depending on what you want to do, you could solve this with surounding both elements with their own div . Then you can style the divs independently. Maybe a float on those divs comes in handy, too.

Answer 2

Close your "page" DIV. It seems that your not properly closing your html tags.