CODEWITHSUNDEEP
jquery
patrick
patrick

Reputation: 9742

Why is an inline-block not "visible"?

Inline-block seems to make elements not match the ":visible" selector?

$('body').append($('<p>').css('display', 'inline-block'))
var p = $('p');
p.is(':visible');
==> false

p.css('display', 'block');
p.is(':visible');
==> true

Upvotes: 0

Views: 227

Answers (1)

Jack
Jack

Reputation: 9388

From jQuery (http://api.jquery.com/visible-selector/) :

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

An empty inline-block will have a height and width of 0 (the width is based on the contained elements)

enter image description here

An empty block element will have a width of the parent element

http://i.snag.gy/cLLei.jpg

More info can be found at w3.org on how width is determined for inline and block level elements.

Edit: As Fabrício Matté points out, this assumes the elements are both empty and appended to the DOM. Detached, even the block element has no parent to calculate layout and will return false.

Upvotes: 2

Related Questions