Why does an inline element take width and height when floated?
Now I have a span element that I give it a width and height, for example 500px I know its an inline element, so it doesn't accept width and height, but why is it applied when I float?
span.first {
width: 500px;
height: 500px;
border: 1px solid #000;
float: right;
}
span.second {
width: 500px;
height: 500px;
border: 1px solid #000;
}
<span class="first">with float</span>
<span class="second">without float</span>
https://codepen.io/kemozzz/pen/KvVrXj
+3
Kareem sultan
source
to share
2 answers
As per CSS rules, when you float an element, in most cases it becomes a block element. Elements that are inline and inline blocks will be evaluated to block.
From MDN: 
+3
Atif Hassan
source
to share
When you float an element, it automatically becomes display: block
.
From the specification:
https://www.w3.org/TR/CSS22/visuren.html#dis-pos-flo
0
Michael_B
source
to share