Step 1 on the MOVE. Why is there a gap at the top of the page?

#1

https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_move?user_id=577d073f14f3ef0528000510

I can't see why the 'main' section isn't flush with the top of the browser.....help would be much much appreciated!


/* Main */
.main {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg);
  text-align: center;

}

.main h1 {
  font-size: 150px;
  text-transform: uppercase;
  color: white;
  text-align: center;
}

.main p {
  font-size: 18px;
  color: white;
  text-align: center;
}
.btn {
  font-size: 18px;
  text-transform: uppercase;
  color: white;
  height: 20;
  width: 50;
  background-color: #1c1c1c;
  padding: 8px 10px;
  display: inline-block;
  text-decoration: none;
}

#2

no? the url is the same for everyone, it checks for the user to load the appropriate code.

the problem is that the margin of the heading and main are collapsing (see collapsing margin, you can overcome this problem by adding by adding padding-top to main

#3

Ah gosh - thank you for being patient with me!

This solution definitely worked, although I'm unsure why. I've carefully read the literature you linked me to but I'm still slightly hazy.

To repeat this back - the margins of all elements have collapsed and result in what we can see here - a 'top margin'.

This is made flush by the introduction of padding-top - of what seems to be any value from 1px to 10px and beyond (they were the main two i tried).

Why is this the case?

P.s. have edited the main post to benefit any others with this issue.

#4

if this answer is to long, read the conclusion.

look at this screenshot:

the yellow bit indicates the margin of the h1 heading. What is important to understand, is that heading elements (h1 till h6) are block level elements.

then it is important to understand that browser have a default stylesheet (see this stakoverflow question), if we look into this stylesheet, we see this (this is the one for firefox):

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: .67em;
  margin-block-end: .67em;
}

which explains why headings are block level elements. but we also see margin-block-start which is a property which is not yet covered, but it acts very similar to margin-top. but the important note here is the em, which means it is relative to the font-size (the bigger the font-size, the bigger the margin)

now that we understand div and h1 are block level elements, we could start to try to understand the w3 documentation (which is complicated)

lets just say for now, that the condition are ideal for adjoining margins. But this part of the documentation is important:

Two margins are adjoining if and only if:

no line boxes, no clearance, no padding and no border separate them
both belong to in-flow block-level boxes that participate in the same block formatting context

which we can reverse, meaning we can use padding to prevent the margins from adjoining.

now lets look at the second point, what does block level boxes mean? In the documentation you can click on it and get to this explanation:

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

okay, as we just determined that h1 is a block, and div is a block as well (go look in the default stylesheet, you will see div is also has a display: block property)

then now block formatting content:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible'(except when that value has been propagated to the viewport) establish new block formatting contexts for their contents

so if you have a float (float: left;) or a absolute element (position: absolute;) a new block format is created, since you don't have this, your h1 and div are in the same block format. (which a condition for adjoining margin to occur)

with other words, a whole lot more measures you can take to prevent adjoining margin (use overflow, and give it any value except visible)

conclusion: adjoining margins are confusing, difficult, and occur rarely because of all the conditions which have to be met.

#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.