Le 24 juin 2013 à 18:38, Manfred Rebentisch <[email protected]> a écrit :
> he following HTML-Snippet can be copied and used directly for > demonstrating the problem (the missing image bl.png is not needed, > but the img tag must be present): > the button's without img tag will be positioned some pixels below the > others. Why? I do not understand that. The joys of the inline-formatting model… You have a nice slightly complicated case. 1. a <button> is basically an element set to display: inline-block; 2a. your <img> (an inline-replaced element) is set to display: block (this complicates matters a little bit, but not much) 2b. the height of the image is taller than the line-box generated inside the <button> read carefully the last block of text explaining the vertical-align property (bottom of page) http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align Then scroll up a bit and see the general explanation, where it talks about non-replaced elements (img is a replaced element!). The solution to your conundrum is to set the <button> to vertical-align: top (or bottom); PS - this part of the spec is also relevant http://www.w3.org/TR/CSS21/visuren.html#inline-formatting Philippe -- Philippe Wittenbergh http://l-c-n.com ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
