-1

I understand how positioning works in general when the values of bottom, top, right and left are given in pixels.

  • bottom: 2px will put the box 2px above the bottom of the page.
  • Similarly top: 2px will put the box 2 pixel below the top of the page.

Reading another question, I've also come to know that the value 0 is equivalent to 0px, 0em etc because units are not necessary for a zero value.

Question: What I don't understand is what do the unit-less nonzero value specify? For example, in this demo the bottom is initially set as 0. If I change the value and set it as say bottom:1 or any numerical value like bottom:786, the green box will be situated as high as possible (that is, just below the rest of the content) without overlapping other content on the page.

So, what do these non zero numerical values for bottom, top, left and right correspond to? How does the browser position these elements when such a value is provided?

Community
  • 1
  • 1
user31782
  • 7,087
  • 14
  • 68
  • 143
  • possible duplicate of http://stackoverflow.com/questions/4318471/property-0-or-property-0px-in-css – Tarun Dugar Feb 07 '16 at 07:58
  • @TarunDugar But they are not explaining for non-zero values. They say that `property:0` is equivalent to `property:0px` but what about `property:1` – user31782 Feb 07 '16 at 08:01
  • when you are using 0 value it's mean 0px but when you use any other value without unit it will have now meaning and browser will have nothing to do with it . just a line through indicating it's a not valid value. – Peter Wilson Feb 07 '16 at 08:09
  • @PeterWilson I am using google chrome and setting any value except zero works. AS I said in the question, If I set bottom:1 or any numerical value like bottom:786 the green box will be situated as high as possible without overlapping other content on the page. – user31782 Feb 07 '16 at 08:12
  • here you can check all css units http://www.w3schools.com/cssref/css_units.asp I think it's browser dependent,I mean certain versions of browsers will calculate the entered value on it's default unit – Peter Wilson Feb 07 '16 at 08:15
  • @user31782: I've reworded the question and title in an attempt to make it clearer. I thought your question wasn't a duplicate (for the reason you've explained) and so I made it clear in the title also. Please feel free to edit (or) roll back if you think your original intent is modified/lost in any way. – Harry Feb 07 '16 at 09:33
  • 1
    @Harry Thanks for the edit. I think users misunderstood my question to be an exact duplicate so they downvoted it. Because I don't see how could I put more research effort. I am a beginner in web designing. – user31782 Feb 07 '16 at 09:37

2 Answers2

2

Html is designed to ignore badly formatted code, so my guess is that the browser is inserting a unit for you (possibly px) or ignoring the property entirely.

The w3 spec for properties is here: http://www.w3.org/TR/CSS21/propidx.html If you scroll to bottom, you'll see the accepted properties are length, percentage, auto, inherit.

The length spec says:

The format of a length value (denoted by length in this specification) is a number (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

So a unit identifier is only optional after a 0 length.

Bmd
  • 1,308
  • 8
  • 15
  • The browser is not inserting `px` automatically. In fact `bottom:1px` and `bottom:1` give different results. – user31782 Feb 07 '16 at 08:32
  • No it can't be a different unit either. Because `bottom:1` and `bottom:3` give identical results. If there were some units associated with the numerical values then bottom:3 should situate the box at a distance three times more than before. IE and chrome both are giving identical results. It seems that all the browser use same rendering scheme as if they are using same predefined translation procedure. – user31782 Feb 07 '16 at 08:41
  • "_If you know that bottom:1 and bottom:786 give different results_" I didn't say this. Both of em give the _Same_ result; even `bottom:0.00011 and `bottom:999999` give same result. – user31782 Feb 07 '16 at 09:01
  • On that 'Try it' page, it seems like the `bottom` value is being ignored entirely when there is a unit-less number. As I said in my answer, HTML is designed to **ignore** badly formatted code. You can test this by commenting out or removing the `bottom` property and you will get the same results. – Bmd Feb 07 '16 at 09:04
  • Actually it is not _ignored_. It seems to work like a Boolean value. I haven't checked in other web-browsers. But I guess the behavior in all browsers would be same. – user31782 Feb 07 '16 at 09:09
  • Yes, something to that effect. Exactly 100% would be I guess putting the green box exactly at the top of the page but it also cares not to overlap things up. May be we can say 100% of the available space. – user31782 Feb 07 '16 at 09:17
2

The first part of the question is already answered by Brian D and so I wouldn't go into much details. In short, when you provide a non-zero and unit-less value for a property, it is invalid and so the browser just ignores it and treats it as though it was not present at all.

Now, coming to the second part of the question, as to why bottom:1 or bottom:786 (or any other value) results in the same output, it is because when you don't assign any value for bottom, its value becomes the default auto. In this case, you haven't assigned any explicit value for top also and so its value also becomes auto.

As per CSS Positioning Spec:

If all three of top, height, and bottom are auto: First set any auto values for margin-top and margin-bottom to 0, then set top to the static position, and finally apply rule number three below.

As you can see from the above statement, when all the three (height, top, bottom) are auto, the browser sets top to the static position which means it is not positioned in any special way and it just follows the page's flow. This is exactly the reason why irrespective of what number (unit less value) is given, it always stays below the first part of the content (all of which also have static positioning).

Harry
  • 87,580
  • 25
  • 202
  • 214
  • Now I understand it. It is setting the property bottom/top etc to `auto`. Thanks. Though I don't get why I am being downvoted. – user31782 Feb 07 '16 at 09:22