Unexplainable space above BUTTON inside DIV

StackOverflow https://stackoverflow.com/questions/11494512

Question

Preface: I've read lots of articles about images inside a div having a strange space around them, etc.

Example #1: Unwanted padding-bottom of a div
Example #2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Example #3: cannot eliminate space between 2 horizontal divs inside containing div

Their issues seems similar but not identical to mine. In this sample document, the border, padding, outline, etc are set to zero .. yet both Opera and Firefox render a spare pixel at the top of the div. The third may cheat a way around this space but nobody seems to answer why it's there..

Edit: I read MANY articles that are temptingly close to answering this, but they all seem slightly different with the actual issue.

What am I missing? It's my first question so be patient please :)

<!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 some CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcomed.

PS: I only care about the Opera rendering, though Firefox would be nice to support with the same standards compliant code.. Thanks!

Was it helpful?

Solution

Change the line-height on the div to zero.

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

jsFiddle example

OTHER TIPS

Set vertical-align to top on the button. That will fix it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top