Margin-Top Percentage Does Not Change When Window Height Decreases

margin-top percentage does not change when window height decreases

The percentage works on the width of the container block, according to the css specifications

The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well.

See for more information.

Percentage based margin-top and height are not working together

If you're looking for a reason as to why this behavior is occurring:

CSS basic box model - 8. The margin properties

Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).

Emphasis added. These margin-top values are relative to the width of the body element. In this instance, if the window is resized horizontally, the heights of the elements don't change, yet the margin-top values do; resulting in vertical alignment issues.

No need to use jQuery to solve this. The solution would be to use something other than margins for displacement. See this updated example.

CSS margin-top is incorrect value

Instead of 50% try 50vh

50% doesn't do what you think it would - it actually uses the width of the parent container, not the height to calculate.

How to set the margin or padding as percentage of height of parent container?

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

margin-top in percentage not working as expected

The point is that a percentage value for top/bottom margin/padding properties is relative to the width of the box's containing block. It doesn't respect the height of the parent element.

8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

<percentage> The percentage is calculated with respect to the width
of the generated box's containing block. Note that this is true for
margin-top and margin-bottom as well. If the containing block's
width depends on this element, then the resulting layout is undefined
in CSS 2.1.

As you are using absolute positioning, try using top: 99% instead in which a percentage value refers to the height of the box's containing block.

CSS fluid layout: margin-top based on percentage grows when container width increases

In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.

Can you do what you want with 'ex' (or 'em') instead? That's the way I'm used to seeing "fluid" values for margin/padding specified ...and it may be less problematic than percentages. (Although I don't have the relevant first-hand experience, I suspect the extremely long precisions on your calculated percentage values are going to set you up for browser incompatibility problems later. My style is to limit CSS percentages to integers if at all possible, or occasionally perhaps one or sometimes maybe even two digits after the decimal point.)

If you really want an exact arbitrarily-sized empty vertical space that's a percentage of the container, the first thing that comes to my mind is a separate empty < div > with a "height: nn%" CSS specification. Or perhaps something else you're specifying is already handling the vertical sizes they way you wish (since it would appear the margins aren't really doing anything at all on a vertical resize).

Why does top/bottom margin set to % change when resizing the screen horizontally?

You can use vh here
vh: is viewport height which will be only reacting when the height change not on width change.

.item {
margin-top: 1vh;
margin-bottom: 1vh;

Read more about units here

Ways to change margin by screen size

you have Several option:

1:Responsive Option:

media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in deprecated CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

@media all and (max-width: 1000px) and (min-width: 700px) {
.class {

2:Using Percentage:
you can use:



Why are margin/padding percentages in CSS always calculated against width?

Transferring my comment to an answer, because it makes logical sense. However, please note that this is unfounded conjecture. The actual reasoning of why the spec is written this way is still, technically, unknown.

Element height is defined by the height of the
children. If an element has padding-top: 10% (relative to parent
height), that is going to affect the height of the parent. Since the
height of the child is dependent on the height of the parent, and the
height of the parent is dependent on the height of the child, we'll
either have inaccurate height, or an infinite loop. Sure, this only
affects the case where offset parent === parent, but still. It's an
odd case that is difficult to resolve.

Update: The last couple sentences may not be entirely accurate. The height of the leaf element (child with no children) has an effect on the height of all elements above it, so this affects many different situations.

The margin top 50% making element out of screen

You can use viewport value instead of ems, pxs or pts.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

Try margin-top:50vh it will take 50% height of the viewport.

width: 300px;
height: 50px;
position: relative;
margin-top: 50vh; //changed this

Demo here

Related Topics

Leave a reply