htmlcsscoding htmlcsscoding - 4 months ago 8
HTML Question

What‘s the difference between setting [<div style=“width:;” onclick=”] to Width: 0;, and setting it to the exact width of the div style?

What's the difference between setting

<div style="width:;" onclick="
to width: 0, and setting it to the exact width of the div style? If they both have the same desired effect, which do you go with?

The desired effect being, clicking off the image in open space doesn't open it. If that's what you want, would just putting [
width: 0;
] on all of them be fine?

Both Examples:
https://jsfiddle.net/vr3tn8o6/2/

50px
<div style="width:50px;" onclick="


<div style="width:50px;" onclick="myObject=document.getElementById('myObj5h');
myObject.style.display='block'; this.style.display='none'">

<div style="display:block; cursor: pointer; width: 50px; height:50px; background-color:#00ffff; margin: 0;">
</div></div>

<div id="myObj5h" style="display: none;">

<div style="display:block;width: 50px; height:50px; background-color:red; ">
</div></div>


0
<div style="width:0;" onclick="


<div style="width:0;" onclick="myObject=document.getElementById('myObj5hf');
myObject.style.display='block'; this.style.display='none'">

<div style="display:block; cursor: pointer; width: 50px; height:50px; background-color:green; margin: 0;">
</div></div>

<div id="myObj5hf" style="display: none;">

<div style="display:block;width: 50px; height:50px; background-color:blue; ">
</div></div>

Answer

Put in the style attribute:

`border: 1px solid red;` /* for debugging purposes */

You will see that the parent has actually width: 0, but the child overflows it. If you set the child not to overflow the parent, all will collapse into nothingness.

To prohibit the child to overflow the parent, use:

overflow: hidden;

Check out this fiddle.

Comments