How to adjust my div's position without collapsing margins?

Question

I have a div inside my header. All I want to do is move it slightly downwards, and I've easily managed to achieve that by changing the div's 'margin-top' value. However, what I dislike about this method is that due to margins collapsing my body doesn't start at the top of the page. What seems to be happening is the div's margin "leaves" the header, and then the header's acquired margin "leaves" again, and ends up in the body.

Here's a visualization of what happens (note the descriptions under each screenshot): https://i.stack.imgur.com/xGYDU.jpg

Are there any alternatives to what I'm trying to do, or should I just not be bothered by the offset that the body is getting?

[UPDATE] I've already tried using padding-top instead, and that solves the body issue, however it conflicts with what my div is doing (see screenshot of the padding issue in the link).

Here's all the relevant code, HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Home - Randoragon GameDev</title>
        <link rel="stylesheet" type="text/css" href="./css/styles.css">
    </head>
    <body>
        <div id="global_container">
            <header>
                <div id="header_banner">
                    <img src="./img/header.png" alt="Header Banner"/>
                    <div class="overlay"></div>
                </div>
                <div class="header_image">
                    <img src="./img/randoragon_logo.png" alt="Randoragon Logo"/>
                    <a href="./index.html"><div class="overlay"></div></a>
                </div>
                <h3><a href="./index.html">RANDORAGON GAMEDEV</a></h3>
            </header>
        </div>
    </body>
</html>

CSS:

html {
    width:  100%;
    height: 100%;
}

body {
    margin: 0px 0px 0px 0px;
    background-color: #202125;
}

header {
    margin: 0px 0px 0px 0px;
    text-align: center;
}


.header_image {
    margin: auto;
    margin-top: 26px;  /* <- THIS IS THE MENTIONED MARGIN */
    margin-bottom: 0px;
    width: 100px;
    height: 100px;
    overflow: hidden; 
    border-radius: 50%;
}

@Johannes I've tried doing that, but that interferes with formatting I have on my div. The div has 'overflow: hidden' on it and its purpose is to round the rectangular image. If I increase the padding, the div stretches and my image "leaks" outside. I'll update the post with a proper screenshot in a second. — Randoragon, Jan 23 '19 at 18:18

Johannes · Accepted Answer · 2019-01-23T18:43:36.310

0

You can use a tiny padding-top on the container (1px), then the margin of the child will remain within the container:

html,
body {
  margin: 0;
}

.x {
  background: red;
  height: 200px;
  padding-top: 1px;
  box-sizing: border-box
}

.y {
  background: green;
  height: 100px;
  margin-top: 30px;
}

<div class="x">
  <div class="y">
  </div>
</div>

edited Jan 23 '19 at 18:43

answered Jan 23 '19 at 18:22

Johannes

64,305
18
73
130

That's clever, although it does add an extra pixel of offset and doesn't feel like a satisfying solution... Is there no prettier way to do it? Thank you for the solution though, I'll go with this if I don't find a better option. – Randoragon Jan 23 '19 at 18:34
Well, another method is to use `border-top: 1px solid transparent;`, but I think the padding is better, since it will still show the background. If you add `box-sizing: border-box`, no pixel is added. – Johannes Jan 23 '19 at 18:43
Hm, I've tried adding 'box-sizing: border-box' but I don't see a difference. Just to be sure I'm doing this right: I added 'padding-top: 1px;' to the header. That solves everything except for the one pixel offset. I tried adding the box-sizing to the header only, and then to everything (with *). I don't see any effect, not sure why it should make a difference either. – Randoragon Jan 23 '19 at 19:00
It just makes a difference for the height of the header: Without it the header will become 1px higher (or maybe more, if you have a bottom padding or borders) – Johannes Jan 23 '19 at 19:48
Okay, that's exactly the behavior I was getting. Luckily, due to the duplicate post status I've found a perfect solution by using inline-block display. Thanks a lot for your responses though, you've helped me understand the dynamic between padding and margins a little bit better, I'm obviously still a beginner. – Randoragon Jan 23 '19 at 22:01

score 0 · Answer 2 · answered Jan 23 '19 at 18:57

0

How about using padding-top and add hidden overflow to your header?

header {
    margin: 0px 0px 0px 0px;
    text-align: center;
    overflow: hidden; 
}

.header_image {
    margin: auto;
    padding-top: 26px;  /* <- THIS IS THE MENTIONED MARGIN */
    margin-bottom: 0px;
    width: 100px;
    height: 100px;
    overflow: hidden; 
    border-radius: 50%;
}

answered Jan 23 '19 at 18:57

Not really sure what the logic behind this solution is, but it doesn't work for me, sorry. I don't see what difference adding 'overflow: hidden' makes in this case, especially given the issue with padding that's mentioned in the post. – Randoragon Jan 23 '19 at 19:17
The logic being you can use the padding option, but clip the overflow problem you were talking about. That was the thought anyway. – Jan 23 '19 at 20:11

How to adjust my div's position without collapsing margins?

2 Answers2