Geek Answers Handbook

Inexplicable space above BUTTON inside DIV

Foreword: I read a lot of articles about images inside divs having strange spaces around them, etc.

Example # 1: Unwanting the bottom of a div
Example # 2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Example # 3: cannot bridge the gap between two horizontal divs inside containing divs

Their problems seem similar, but not identical to mine. In this example document, a border, padding, outline, etc. Set to zero. However, both Opera and Firefox display a spare pixel at the top of the div. A third may trick the way around this space, but no one seems to answer why it is there.

Edit: I read MANY articles that are seductively close to answering this, but they all seem a little different from the actual problem.

What am I missing? This is my first question, so be patient :)

<!doctype html> <html> <head> <title>Anger</title> <style> *{ cursor: default; margin: 0; outline: 0; border: none; padding: 0; text-decoration: none; } body{ background-color: #87cefa; } div{ background-color: #ffffff; } button{ border-radius: 9px; padding: 1px 6px 2px 6px; font: 14px monospace; color: #ffffff; background-color: #1e90ff; } </style> <head> <body> <div> <button>Sample Button</button> </div> </body> <html>

Is there any CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcome.

PS: Iā€™m most interested in working with Opera rendering, although Firefox will be well supported with the same standard code. Thanks!

+7
source share
2 answers

Change the height of the line on the div to zero.

  div{ background-color: #ffffff; line-height:0; }

JsFiddle example

+5
source

Set the vertical orientation on top of the button. This will fix it.

+3
source

More articles:


All Articles