Definition of "margin-top" in percentage of a "div" works strangely

Asked

Viewed 2,562 times

2

I own a page .xhtml and the first element to be placed is a div(content) and I set for her a higher margin(margin-top) of 30%.

Supposedly, from what I understand, this percentage should be taken from the height of my screen, in my case I have a screen of 1600 795 and the 30% would be taken from the 795px.

See what happens:

#content
{
  width: 300px;
  height: 200px;
  margin: 0 auto;
  margin-top: 50%;
  background: red;
}
<div id="content">
</div>

In the example I put 50% of margin-top to be able to pass the perception of what happens. It should be at 50% of the top but seems to have descended much more.

html css

  • Fiddle isn’t giving the idea 100% but I believe it already helps.

4 answers

2

Really if you go simply by logic would imply that the margin-top and margin-bottom when specified in % would be a value referring to the height of the parent element, but that’s not how it works.

When the margin is specified in '%' it will always refer to width (width) of the parent element, you can easily check this by resizing the window, you will see that the element will change position only when you change the width of the window.

  • This is what happens, as the specification reads: http://www.w3.org/TR/CSS2/box.html#margin-properties

0

I tweaked your CSS a little bit:

#content
{
width: 300px;
height: 200px;
position: absolute;
top: 0; 
bottom: 0;
left: 0; 
right: 0;
margin: auto;
background: red;
}
<div id="content">
</div>

I think that will solve your problem

  • Thank you, but my point is not to make it work is to understand how it works. Your solution totally centralizes the element (if I understood correctly), but in my example I wanted to understand why the margin-top worked the way it did.

  • then really your question was not very clear ... or I must have some mental problem rs

0

adds to the div css #content

display: table-caption;
  • 2

    Your answer would be more complete if you added a small explanation of how this solves the problem.

0

As already mentioned, margin and padding with percentage, use the width of the element. The margin is based on the parent element. And the padding is based on the element itself.

Whether his intention was that the element, namely his #content stay centered, you should do as in the following example.

 #content {
     position: absolute;
     display: block;
     width: 200px;
     height: 200px;
     top: calc(50% - 100px);
     left: calc(50% - 100px);
 }

in the example I say that my #content will have a distance of 50% from the top of the next parent element that has position: relative, less than half the height of my element, because when we use the attribute top, it references itself by the top of the element and not by the center. Similarly to the left, except that the distance is 50% less half the width of the element.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.