Unexplainable space above BUTTON inside DIV

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!

score 6 · Accepted Answer · answered Jul 15 '12 at 18:39

6

Change the line-height on the div to zero.

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

jsFiddle example

answered Jul 15 '12 at 18:39

j08691

190,436
28
232
252

Thanks! That works, does anyone know where in the specs (I do read them) this behavior is specified? – Fumbles Jul 15 '12 at 18:43
1

Well the line height is related to the font-size which obviously can be different across OSes. You can read more at https://developer.mozilla.org/en/CSS/line-height and see that the default line-height is about 1.2. Since you didn't specify any font rules in your CSS, the default line height kicked in and resetting it to zero fixed things. – j08691 Jul 15 '12 at 18:46
1

@Fumbles - CSS 2.1 spec sections [10.6](http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins) and [10.8](http://www.w3.org/TR/CSS2/visudet.html#line-height). But it's not an easy read. – Alohci Jul 15 '12 at 18:51
@j08691 I'm slightly confused HOW this fix works because the document where I first encountered this issue is completely created via DOM methods.. (thus in theory there should be no spaces in the DOM) We are using the line-height to fix lines that should not exist in my theory. I'll read more specs when I can too.. Thanks for helping get some understanding of what's happening :) – Fumbles Jul 15 '12 at 18:54
The vertical-align answer is better in my opinion. – Juan Ibiapina Nov 01 '15 at 15:00

score 4 · Answer 2 · answered Jul 15 '12 at 18:42

4

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

answered Jul 15 '12 at 18:42

João Paulo Macedo

14,267
4
29
39

aha that works too, is there some "fix" that I can add to my style reset for all elements that will also cure this? If not, then I'll choose between the working answers, and just use it where I notice this issue :) – Fumbles Jul 15 '12 at 18:47
I'd argue that this is better since you won't mess up the div's line-height (add another inline element to the div and it will look weird. Why? It's line-height will be 0. You can override though but it's unnecessary work, really). On my reset stylesheet I do believe I have something like button, input, textarea {vertical-align:top; /*among other things*/}. I will develop my answer though to explain why vertical-align top works, and why you need it in the first place. Give me 10 mins. – João Paulo Macedo Jul 15 '12 at 18:59
Great, I just wish such oddball behaviour was eliminated from specs as it seems to do no good lol – Fumbles Jul 15 '12 at 19:09

Unexplainable space above BUTTON inside DIV

2 Answers2