Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too

The image inside the container element having a specific display type behaves differently when using the img { width: 0; } or img { width: 0%; } style rules.

Increasing the value of width using any unit other than % gave the same expected result (img occupies only the shown part of it).

I've tried changing the display type of the container the img is in. The result is shown below.

Container display types in which the img is shown not as expected:

-webkit-inline-box

inline-block

inline-flex

inline-grid

inline-table

table

table-cell

table-row

table-row-group

table-header-group

table-footer-group

Not sure how they're related to each other, probably I'm missing something.

button:first-of-type img {

  width: 0;

}



button:last-of-type img {

  width: 0%;

}

<h3>The image width: 0 (hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>





<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>

The img { width: 0%; } should work as it was img { width: 0; } without occupying any space, which isn't the case here.

asked Jan 2 at 16:55

Lukas

276

I'm confused as to what it is you are trying to achieve here. If you don't want to show the image why include it in the first place?

– Paulie_D
Jan 2 at 17:05

I'm simply curious why it behaves the way it is. Also, try changing the 0%, to, let's say 30%. You will see the occupied space remains the same while the image size changes to 30% of the parent container.

– Lukas
Jan 2 at 17:07

Any ideas, guys?

– Lukas
Jan 2 at 17:44

1

It's a good question. Wish I had time right now to look into it. Note that the difference appears applicable to image elements only. If you try the width: 0 / width: 0% on other elements, such as the button parent, the rendering is consistent.

– Michael_B
Jan 2 at 18:39

2

@Michael_B not only images, check my answer

– Temani Afif
Jan 2 at 19:41

add a comment |

The image inside the container element having a specific display type behaves differently when using the img { width: 0; } or img { width: 0%; } style rules.

Increasing the value of width using any unit other than % gave the same expected result (img occupies only the shown part of it).

I've tried changing the display type of the container the img is in. The result is shown below.

Container display types in which the img is shown not as expected:

-webkit-inline-box

inline-block

inline-flex

inline-grid

inline-table

table

table-cell

table-row

table-row-group

table-header-group

table-footer-group

Not sure how they're related to each other, probably I'm missing something.

button:first-of-type img {

  width: 0;

}



button:last-of-type img {

  width: 0%;

}

<h3>The image width: 0 (hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>





<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>

The img { width: 0%; } should work as it was img { width: 0; } without occupying any space, which isn't the case here.

asked Jan 2 at 16:55

Lukas

276

I'm confused as to what it is you are trying to achieve here. If you don't want to show the image why include it in the first place?

– Paulie_D
Jan 2 at 17:05

I'm simply curious why it behaves the way it is. Also, try changing the 0%, to, let's say 30%. You will see the occupied space remains the same while the image size changes to 30% of the parent container.

– Lukas
Jan 2 at 17:07

Any ideas, guys?

– Lukas
Jan 2 at 17:44

1

It's a good question. Wish I had time right now to look into it. Note that the difference appears applicable to image elements only. If you try the width: 0 / width: 0% on other elements, such as the button parent, the rendering is consistent.

– Michael_B
Jan 2 at 18:39

2

@Michael_B not only images, check my answer

– Temani Afif
Jan 2 at 19:41

add a comment |

The image inside the container element having a specific display type behaves differently when using the img { width: 0; } or img { width: 0%; } style rules.

Increasing the value of width using any unit other than % gave the same expected result (img occupies only the shown part of it).

I've tried changing the display type of the container the img is in. The result is shown below.

Container display types in which the img is shown not as expected:

-webkit-inline-box

inline-block

inline-flex

inline-grid

inline-table

table

table-cell

table-row

table-row-group

table-header-group

table-footer-group

Not sure how they're related to each other, probably I'm missing something.

button:first-of-type img {

  width: 0;

}



button:last-of-type img {

  width: 0%;

}

<h3>The image width: 0 (hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>





<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>

The img { width: 0%; } should work as it was img { width: 0; } without occupying any space, which isn't the case here.

asked Jan 2 at 16:55

Lukas

276

The image inside the container element having a specific display type behaves differently when using the img { width: 0; } or img { width: 0%; } style rules.

Increasing the value of width using any unit other than % gave the same expected result (img occupies only the shown part of it).

I've tried changing the display type of the container the img is in. The result is shown below.

Container display types in which the img is shown not as expected:

-webkit-inline-box

inline-block

inline-flex

inline-grid

inline-table

table

table-cell

table-row

table-row-group

table-header-group

table-footer-group

Not sure how they're related to each other, probably I'm missing something.

button:first-of-type img {

  width: 0;

}



button:last-of-type img {

  width: 0%;

}

<h3>The image width: 0 (hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>





<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>

The img { width: 0%; } should work as it was img { width: 0; } without occupying any space, which isn't the case here.

button:first-of-type img {

  width: 0;

}



button:last-of-type img {

  width: 0%;

}

<h3>The image width: 0 (hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>





<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>

button:first-of-type img {

  width: 0;

}



button:last-of-type img {

  width: 0%;

}

<h3>The image width: 0 (hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>





<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>



<button>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

      <p>Add playlist</p>

</button>

html css image display

asked Jan 2 at 16:55

Lukas

276

asked Jan 2 at 16:55

Lukas

276

asked Jan 2 at 16:55

Lukas

276

asked Jan 2 at 16:55

Lukas

276

asked Jan 2 at 16:55

Lukas

276

I'm confused as to what it is you are trying to achieve here. If you don't want to show the image why include it in the first place?

– Paulie_D
Jan 2 at 17:05

I'm simply curious why it behaves the way it is. Also, try changing the 0%, to, let's say 30%. You will see the occupied space remains the same while the image size changes to 30% of the parent container.

– Lukas
Jan 2 at 17:07

Any ideas, guys?

– Lukas
Jan 2 at 17:44

1

It's a good question. Wish I had time right now to look into it. Note that the difference appears applicable to image elements only. If you try the width: 0 / width: 0% on other elements, such as the button parent, the rendering is consistent.

– Michael_B
Jan 2 at 18:39

2

@Michael_B not only images, check my answer

– Temani Afif
Jan 2 at 19:41

add a comment |

I'm confused as to what it is you are trying to achieve here. If you don't want to show the image why include it in the first place?

– Paulie_D
Jan 2 at 17:05

I'm simply curious why it behaves the way it is. Also, try changing the 0%, to, let's say 30%. You will see the occupied space remains the same while the image size changes to 30% of the parent container.

– Lukas
Jan 2 at 17:07

Any ideas, guys?

– Lukas
Jan 2 at 17:44

1

It's a good question. Wish I had time right now to look into it. Note that the difference appears applicable to image elements only. If you try the width: 0 / width: 0% on other elements, such as the button parent, the rendering is consistent.

– Michael_B
Jan 2 at 18:39

2

@Michael_B not only images, check my answer

– Temani Afif
Jan 2 at 19:41

I'm confused as to what it is you are trying to achieve here. If you don't want to show the image why include it in the first place?

– Paulie_D
Jan 2 at 17:05

I'm simply curious why it behaves the way it is. Also, try changing the 0%, to, let's say 30%. You will see the occupied space remains the same while the image size changes to 30% of the parent container.

– Lukas
Jan 2 at 17:07

Any ideas, guys?

– Lukas
Jan 2 at 17:44

It's a good question. Wish I had time right now to look into it. Note that the difference appears applicable to image elements only. If you try the width: 0 / width: 0% on other elements, such as the button parent, the rendering is consistent.

– Michael_B
Jan 2 at 18:39

@Michael_B not only images, check my answer

– Temani Afif
Jan 2 at 19:41

add a comment |

2 Answers
2

active

oldest

votes

As @Talmid said in his answer we are facing a complex calculation and using width:0 and width:0% isn't the same.

The first one is an absolute value (a length) that the browser can resolve without the need of any reference but the second one is a percentage value that is relative to the width of the containing block so the browser need to know the width of the containing block first to resolve it. (it will not do the effort to conclude that 0% will be the same as 0)

This issue will happen with all the elements where we have a shrink-to-fit behavior (float, inline-block, etc)

Here is more examples:

img {

  width: 30%;

}



span {

  border: 1px solid;

  display: inline-block;

}

<span>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>



<span style="float:left;">

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>

This can also happen with non-image elements:

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30%;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0%;">some text</span>

</div>

Basically, the browser will first define the dimension of the containing block (at this step we don't consider the percentage value defined on the width property of the child element). Logically the dimension of the containing block will be defined by its content (the shrink-to-fit behavior). After that we are able to resolve the percentage value based of the width calculated previously thus the child element will shrink.

Of course we will not get back to calculate the width of the containing block again as we will have a non-ending loop (a cycle).

In case the child element uses a non-percentage value (a length), the browser will consider it first when defining the width of the containing block since it's not a relative value but an absolute one:

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30px;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0;">some text</span>

</div>

edited Jan 3 at 22:42

answered Jan 2 at 19:41

Temani Afif

80.8k94692

Wow! A really awesome answer, however, it'll take some time for me to understand. The browser tries not to create an endless loop and thus showing us, at first glance, unexpected results. Can you explain a bit more about the ' shrink-to-fit behavior'? What other than float, inline-block elements have it? It means all the elements which have one of those display types I`ve listed above going to have shrink-to-fit behavior? This is so confusing for me right now.

– Lukas
Jan 2 at 20:03

@Lukas basically a shrink-to-fit element is the opposite of full width element. For example a block element will by default take all the width (doesn't care about its content) but an inline-block (a shrink-to-fit) element will have its width defined by its content thus the issue because the content is also having a width relative to his parent (a cycle dependency) .. and yes, what you listed are almost all shrink-to-fit

– Temani Afif
Jan 2 at 20:15

Now I get :) Thanks. I'll experiment with your examples and the project I'm working on. Would be great if you could assist me tomorrow if any questions appeared. So much valuable information :)

– Lukas
Jan 2 at 21:06

I think this is as good an explanation as one can provide. But I'm not sure it would apply across all browsers, since width: 0 leaves open a wide range of interpretation. As a general rule, it's better to avoid the use of unitless values for lengths. Some browsers will automatically append %. Others px. Others something else. There's no guarantee of stability. There are few exceptions to this "rule", such as the line-height property, which recommends unitless values.

– Michael_B
Jan 3 at 14:10

@Michael_B I would say it depends on the property but using 0 doesn't require a unit and I don't think it will get interpreted as percentage. If we refer to the specifcation (w3.org/TR/CSS2/syndata.html#length-units) we can see that 0 is mentionned in the length part and not the percentage part. So the browser will consider 0 as a length. Omitting the unit is a kind of optimization since it's zero. I agree we should avoid unitless with numbers (which is invalid in most of the cases) but with 0 it's not an issue.

– Temani Afif
Jan 3 at 14:20

|
show 2 more comments

The container's width is determined by the img width, which is a percentage of the container's width, which is determined by the img width, which ... (circular reference).

The browser resolves this by just setting the container width to the image's pre-scaled width when a percentage width for the img is specified.

Although, it does seem like the special case of 0% could be treated like 0px, but perhaps it is not in order to be consistent with the behavior for other specified percentage values.

edited Jan 2 at 18:47

answered Jan 2 at 18:39

Talmid

631713

I like your ideas but it's really weird I couldn't find the official docs for this behavior. So it's like guessing now.

– Lukas
Jan 2 at 19:41

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010222%2fsetting-the-image-width-0-hides-it-while-width-0-makes-it-occupy-the-spa%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

As @Talmid said in his answer we are facing a complex calculation and using width:0 and width:0% isn't the same.

This issue will happen with all the elements where we have a shrink-to-fit behavior (float, inline-block, etc)

Here is more examples:

img {

  width: 30%;

}



span {

  border: 1px solid;

  display: inline-block;

}

<span>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>



<span style="float:left;">

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>

This can also happen with non-image elements:

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30%;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0%;">some text</span>

</div>

Of course we will not get back to calculate the width of the containing block again as we will have a non-ending loop (a cycle).

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30px;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0;">some text</span>

</div>

edited Jan 3 at 22:42

answered Jan 2 at 19:41

Temani Afif

80.8k94692

Wow! A really awesome answer, however, it'll take some time for me to understand. The browser tries not to create an endless loop and thus showing us, at first glance, unexpected results. Can you explain a bit more about the ' shrink-to-fit behavior'? What other than float, inline-block elements have it? It means all the elements which have one of those display types I`ve listed above going to have shrink-to-fit behavior? This is so confusing for me right now.

– Lukas
Jan 2 at 20:03

@Lukas basically a shrink-to-fit element is the opposite of full width element. For example a block element will by default take all the width (doesn't care about its content) but an inline-block (a shrink-to-fit) element will have its width defined by its content thus the issue because the content is also having a width relative to his parent (a cycle dependency) .. and yes, what you listed are almost all shrink-to-fit

– Temani Afif
Jan 2 at 20:15

Now I get :) Thanks. I'll experiment with your examples and the project I'm working on. Would be great if you could assist me tomorrow if any questions appeared. So much valuable information :)

– Lukas
Jan 2 at 21:06

I think this is as good an explanation as one can provide. But I'm not sure it would apply across all browsers, since width: 0 leaves open a wide range of interpretation. As a general rule, it's better to avoid the use of unitless values for lengths. Some browsers will automatically append %. Others px. Others something else. There's no guarantee of stability. There are few exceptions to this "rule", such as the line-height property, which recommends unitless values.

– Michael_B
Jan 3 at 14:10

@Michael_B I would say it depends on the property but using 0 doesn't require a unit and I don't think it will get interpreted as percentage. If we refer to the specifcation (w3.org/TR/CSS2/syndata.html#length-units) we can see that 0 is mentionned in the length part and not the percentage part. So the browser will consider 0 as a length. Omitting the unit is a kind of optimization since it's zero. I agree we should avoid unitless with numbers (which is invalid in most of the cases) but with 0 it's not an issue.

– Temani Afif
Jan 3 at 14:20

|
show 2 more comments

As @Talmid said in his answer we are facing a complex calculation and using width:0 and width:0% isn't the same.

This issue will happen with all the elements where we have a shrink-to-fit behavior (float, inline-block, etc)

Here is more examples:

img {

  width: 30%;

}



span {

  border: 1px solid;

  display: inline-block;

}

<span>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>



<span style="float:left;">

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>

This can also happen with non-image elements:

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30%;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0%;">some text</span>

</div>

Of course we will not get back to calculate the width of the containing block again as we will have a non-ending loop (a cycle).

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30px;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0;">some text</span>

</div>

edited Jan 3 at 22:42

answered Jan 2 at 19:41

Temani Afif

80.8k94692

Wow! A really awesome answer, however, it'll take some time for me to understand. The browser tries not to create an endless loop and thus showing us, at first glance, unexpected results. Can you explain a bit more about the ' shrink-to-fit behavior'? What other than float, inline-block elements have it? It means all the elements which have one of those display types I`ve listed above going to have shrink-to-fit behavior? This is so confusing for me right now.

– Lukas
Jan 2 at 20:03

@Lukas basically a shrink-to-fit element is the opposite of full width element. For example a block element will by default take all the width (doesn't care about its content) but an inline-block (a shrink-to-fit) element will have its width defined by its content thus the issue because the content is also having a width relative to his parent (a cycle dependency) .. and yes, what you listed are almost all shrink-to-fit

– Temani Afif
Jan 2 at 20:15

Now I get :) Thanks. I'll experiment with your examples and the project I'm working on. Would be great if you could assist me tomorrow if any questions appeared. So much valuable information :)

– Lukas
Jan 2 at 21:06

I think this is as good an explanation as one can provide. But I'm not sure it would apply across all browsers, since width: 0 leaves open a wide range of interpretation. As a general rule, it's better to avoid the use of unitless values for lengths. Some browsers will automatically append %. Others px. Others something else. There's no guarantee of stability. There are few exceptions to this "rule", such as the line-height property, which recommends unitless values.

– Michael_B
Jan 3 at 14:10

@Michael_B I would say it depends on the property but using 0 doesn't require a unit and I don't think it will get interpreted as percentage. If we refer to the specifcation (w3.org/TR/CSS2/syndata.html#length-units) we can see that 0 is mentionned in the length part and not the percentage part. So the browser will consider 0 as a length. Omitting the unit is a kind of optimization since it's zero. I agree we should avoid unitless with numbers (which is invalid in most of the cases) but with 0 it's not an issue.

– Temani Afif
Jan 3 at 14:20

|
show 2 more comments

As @Talmid said in his answer we are facing a complex calculation and using width:0 and width:0% isn't the same.

This issue will happen with all the elements where we have a shrink-to-fit behavior (float, inline-block, etc)

Here is more examples:

img {

  width: 30%;

}



span {

  border: 1px solid;

  display: inline-block;

}

<span>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>



<span style="float:left;">

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>

This can also happen with non-image elements:

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30%;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0%;">some text</span>

</div>

Of course we will not get back to calculate the width of the containing block again as we will have a non-ending loop (a cycle).

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30px;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0;">some text</span>

</div>

edited Jan 3 at 22:42

answered Jan 2 at 19:41

Temani Afif

80.8k94692

As @Talmid said in his answer we are facing a complex calculation and using width:0 and width:0% isn't the same.

This issue will happen with all the elements where we have a shrink-to-fit behavior (float, inline-block, etc)

Here is more examples:

img {

  width: 30%;

}



span {

  border: 1px solid;

  display: inline-block;

}

<span>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>



<span style="float:left;">

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>

This can also happen with non-image elements:

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30%;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0%;">some text</span>

</div>

Of course we will not get back to calculate the width of the containing block again as we will have a non-ending loop (a cycle).

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30px;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0;">some text</span>

</div>

img {

  width: 30%;

}



span {

  border: 1px solid;

  display: inline-block;

}

<span>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>



<span style="float:left;">

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>

img {

  width: 30%;

}



span {

  border: 1px solid;

  display: inline-block;

}

<span>

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>



<span style="float:left;">

      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">

</span>

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30%;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0%;">some text</span>

</div>

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30%;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0%;">some text</span>

</div>

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30px;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0;">some text</span>

</div>

span  {

  display:inline-block;

  border:1px solid red;

}

<div style="float:left;border: 1px solid;">

      <span >some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:30px;">some text</span>

</div>

<div style="float:left;border: 1px solid;clear:left;">

      <span style="width:0;">some text</span>

</div>

edited Jan 3 at 22:42

answered Jan 2 at 19:41

Temani Afif

80.8k94692

edited Jan 3 at 22:42

answered Jan 2 at 19:41

Temani Afif

80.8k94692

answered Jan 2 at 19:41

Temani Afif

80.8k94692

answered Jan 2 at 19:41

Temani Afif

80.8k94692

Wow! A really awesome answer, however, it'll take some time for me to understand. The browser tries not to create an endless loop and thus showing us, at first glance, unexpected results. Can you explain a bit more about the ' shrink-to-fit behavior'? What other than float, inline-block elements have it? It means all the elements which have one of those display types I`ve listed above going to have shrink-to-fit behavior? This is so confusing for me right now.

– Lukas
Jan 2 at 20:03

@Lukas basically a shrink-to-fit element is the opposite of full width element. For example a block element will by default take all the width (doesn't care about its content) but an inline-block (a shrink-to-fit) element will have its width defined by its content thus the issue because the content is also having a width relative to his parent (a cycle dependency) .. and yes, what you listed are almost all shrink-to-fit

– Temani Afif
Jan 2 at 20:15

Now I get :) Thanks. I'll experiment with your examples and the project I'm working on. Would be great if you could assist me tomorrow if any questions appeared. So much valuable information :)

– Lukas
Jan 2 at 21:06

I think this is as good an explanation as one can provide. But I'm not sure it would apply across all browsers, since width: 0 leaves open a wide range of interpretation. As a general rule, it's better to avoid the use of unitless values for lengths. Some browsers will automatically append %. Others px. Others something else. There's no guarantee of stability. There are few exceptions to this "rule", such as the line-height property, which recommends unitless values.

– Michael_B
Jan 3 at 14:10

@Michael_B I would say it depends on the property but using 0 doesn't require a unit and I don't think it will get interpreted as percentage. If we refer to the specifcation (w3.org/TR/CSS2/syndata.html#length-units) we can see that 0 is mentionned in the length part and not the percentage part. So the browser will consider 0 as a length. Omitting the unit is a kind of optimization since it's zero. I agree we should avoid unitless with numbers (which is invalid in most of the cases) but with 0 it's not an issue.

– Temani Afif
Jan 3 at 14:20

|
show 2 more comments

Wow! A really awesome answer, however, it'll take some time for me to understand. The browser tries not to create an endless loop and thus showing us, at first glance, unexpected results. Can you explain a bit more about the ' shrink-to-fit behavior'? What other than float, inline-block elements have it? It means all the elements which have one of those display types I`ve listed above going to have shrink-to-fit behavior? This is so confusing for me right now.

– Lukas
Jan 2 at 20:03

@Lukas basically a shrink-to-fit element is the opposite of full width element. For example a block element will by default take all the width (doesn't care about its content) but an inline-block (a shrink-to-fit) element will have its width defined by its content thus the issue because the content is also having a width relative to his parent (a cycle dependency) .. and yes, what you listed are almost all shrink-to-fit

– Temani Afif
Jan 2 at 20:15

Now I get :) Thanks. I'll experiment with your examples and the project I'm working on. Would be great if you could assist me tomorrow if any questions appeared. So much valuable information :)

– Lukas
Jan 2 at 21:06

I think this is as good an explanation as one can provide. But I'm not sure it would apply across all browsers, since width: 0 leaves open a wide range of interpretation. As a general rule, it's better to avoid the use of unitless values for lengths. Some browsers will automatically append %. Others px. Others something else. There's no guarantee of stability. There are few exceptions to this "rule", such as the line-height property, which recommends unitless values.

– Michael_B
Jan 3 at 14:10

@Michael_B I would say it depends on the property but using 0 doesn't require a unit and I don't think it will get interpreted as percentage. If we refer to the specifcation (w3.org/TR/CSS2/syndata.html#length-units) we can see that 0 is mentionned in the length part and not the percentage part. So the browser will consider 0 as a length. Omitting the unit is a kind of optimization since it's zero. I agree we should avoid unitless with numbers (which is invalid in most of the cases) but with 0 it's not an issue.

– Temani Afif
Jan 3 at 14:20

Wow! A really awesome answer, however, it'll take some time for me to understand. The browser tries not to create an endless loop and thus showing us, at first glance, unexpected results. Can you explain a bit more about the ' shrink-to-fit behavior'? What other than float, inline-block elements have it? It means all the elements which have one of those display types I`ve listed above going to have shrink-to-fit behavior? This is so confusing for me right now.

– Lukas
Jan 2 at 20:03

@Lukas basically a shrink-to-fit element is the opposite of full width element. For example a block element will by default take all the width (doesn't care about its content) but an inline-block (a shrink-to-fit) element will have its width defined by its content thus the issue because the content is also having a width relative to his parent (a cycle dependency) .. and yes, what you listed are almost all shrink-to-fit

– Temani Afif
Jan 2 at 20:15

Now I get :) Thanks. I'll experiment with your examples and the project I'm working on. Would be great if you could assist me tomorrow if any questions appeared. So much valuable information :)

– Lukas
Jan 2 at 21:06

I think this is as good an explanation as one can provide. But I'm not sure it would apply across all browsers, since width: 0 leaves open a wide range of interpretation. As a general rule, it's better to avoid the use of unitless values for lengths. Some browsers will automatically append %. Others px. Others something else. There's no guarantee of stability. There are few exceptions to this "rule", such as the line-height property, which recommends unitless values.

– Michael_B
Jan 3 at 14:10

@Michael_B I would say it depends on the property but using 0 doesn't require a unit and I don't think it will get interpreted as percentage. If we refer to the specifcation (w3.org/TR/CSS2/syndata.html#length-units) we can see that 0 is mentionned in the length part and not the percentage part. So the browser will consider 0 as a length. Omitting the unit is a kind of optimization since it's zero. I agree we should avoid unitless with numbers (which is invalid in most of the cases) but with 0 it's not an issue.

– Temani Afif
Jan 3 at 14:20

|
show 2 more comments

The container's width is determined by the img width, which is a percentage of the container's width, which is determined by the img width, which ... (circular reference).

The browser resolves this by just setting the container width to the image's pre-scaled width when a percentage width for the img is specified.

Although, it does seem like the special case of 0% could be treated like 0px, but perhaps it is not in order to be consistent with the behavior for other specified percentage values.

edited Jan 2 at 18:47

answered Jan 2 at 18:39

Talmid

631713

I like your ideas but it's really weird I couldn't find the official docs for this behavior. So it's like guessing now.

– Lukas
Jan 2 at 19:41

add a comment |

The container's width is determined by the img width, which is a percentage of the container's width, which is determined by the img width, which ... (circular reference).

The browser resolves this by just setting the container width to the image's pre-scaled width when a percentage width for the img is specified.

Although, it does seem like the special case of 0% could be treated like 0px, but perhaps it is not in order to be consistent with the behavior for other specified percentage values.

edited Jan 2 at 18:47

answered Jan 2 at 18:39

Talmid

631713

I like your ideas but it's really weird I couldn't find the official docs for this behavior. So it's like guessing now.

– Lukas
Jan 2 at 19:41

add a comment |

The container's width is determined by the img width, which is a percentage of the container's width, which is determined by the img width, which ... (circular reference).

The browser resolves this by just setting the container width to the image's pre-scaled width when a percentage width for the img is specified.

Although, it does seem like the special case of 0% could be treated like 0px, but perhaps it is not in order to be consistent with the behavior for other specified percentage values.

edited Jan 2 at 18:47

answered Jan 2 at 18:39

Talmid

631713

The container's width is determined by the img width, which is a percentage of the container's width, which is determined by the img width, which ... (circular reference).

The browser resolves this by just setting the container width to the image's pre-scaled width when a percentage width for the img is specified.

Although, it does seem like the special case of 0% could be treated like 0px, but perhaps it is not in order to be consistent with the behavior for other specified percentage values.

edited Jan 2 at 18:47

answered Jan 2 at 18:39

Talmid

631713

edited Jan 2 at 18:47

answered Jan 2 at 18:39

Talmid

631713

answered Jan 2 at 18:39

Talmid

631713

answered Jan 2 at 18:39

Talmid

631713

I like your ideas but it's really weird I couldn't find the official docs for this behavior. So it's like guessing now.

– Lukas
Jan 2 at 19:41

add a comment |

I like your ideas but it's really weird I couldn't find the official docs for this behavior. So it's like guessing now.

– Lukas
Jan 2 at 19:41

I like your ideas but it's really weird I couldn't find the official docs for this behavior. So it's like guessing now.

– Lukas
Jan 2 at 19:41

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu