Padding is not zero

RW · Nov 7 '08, 05:15 AM

Re: Padding is not zero

rodeored schreef:

page: http://reenie.org/test/blockpadding.htm
code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<h2 style='padding: 0; border:solid 1px red;'>A bunch of text</h2>
</body>
</html>
>
Why is there padding in the heading, above and below the text, and how
do I get rid of it ?

That's the body's margin or padding,

try <body style='margin:0 ; padding:0;'>

--
Rob

**Johannes Koch** · Nov 7 '08, 08:15 AM

Re: Padding is not zero

rodeored schrieb:

page: http://reenie.org/test/blockpadding.htm
code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<h2 style='padding: 0; border:solid 1px red;'>A bunch of text</h2>
</body>
</html>
>
Why is there padding in the heading, above and below the text, and how
do I get rid of it ?

If it were padding it were _inside_ the border. So it's h2's default
probably margin.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

**rodeored** · Nov 7 '08, 10:55 AM

Re: Padding is not zero

On Nov 7, 12:09 am, RW <robwaaijenb... @hotmail.comwro te:

rodeored schreef:
>

page:http://reenie.org/test/blockpadding.htm
code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<h2 style='padding: 0; border:solid 1px red;'>A bunch of text</h2>
</body>
</html>

>

Why is there padding in the heading, above and below the text, and how
do I get rid of it ?

>
That's the body's margin or padding,
>
try <body style='margin:0 ; padding:0;'>
>
--
Rob

No its not the baody margin. its padding inside the heading.

**rodeored** · Nov 7 '08, 10:55 AM

Re: Padding is not zero

On Nov 7, 3:04 am, Johannes Koch <k...@w3develop ment.dewrote:

rodeored schrieb:
>

page:http://reenie.org/test/blockpadding.htm
code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<h2 style='padding: 0; border:solid 1px red;'>A bunch of text</h2>
</body>
</html>

>

Why is there padding in the heading, above and below the text, and how
do I get rid of it ?

>
If it were padding it were _inside_ the border. So it's h2's default
probably margin.
>
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

it is is padding inside the heading. . it is not a margin. it is
padding.

**Bergamot** · Nov 7 '08, 11:55 AM

Re: Padding is not zero

rodeored wrote:

On Nov 7, 3:04 am, Johannes Koch <k...@w3develop ment.dewrote:

>rodeored schrieb:
>>

page:http://reenie.org/test/blockpadding.htm
<body>
<h2 style='padding: 0; border:solid 1px red;'>A bunch of text</h2>
</body>

>>

Why is there padding in the heading, above and below the text, and how
do I get rid of it ?

>>
>If it were padding it were _inside_ the border. So it's h2's default
>probably margin.

>
it is is padding inside the heading. . it is not a margin. it is
padding.

No, it is not padding. Inside the borders, that extra space above and
below the text is part of the default line-height - space reserved for
character ascenders (e.g. Ñ) and descenders (y). You may or may not be
able to get rid of it by changing the line-height to something less than
1, but beware that if line wrapping occurs, text may overlap. It will
certainly be harder to read.

--
Berg

**David Stone** · Nov 7 '08, 01:45 PM

Re: Padding is not zero

In article
<dec5e6c6-145b-4ec6-aa18-43995ef46518@40 g2000prx.google groups.com>,
rodeored <info1@reenie.o rgwrote:

On Nov 7, 12:09 am, RW <robwaaijenb... @hotmail.comwro te:

rodeored schreef:

page:http://reenie.org/test/blockpadding.htm
code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<h2 style='padding: 0; border:solid 1px red;'>A bunch of text</h2>
</body>
</html>

Why is there padding in the heading, above and below the text, and how
do I get rid of it ?

That's the body's margin or padding,

try <body style='margin:0 ; padding:0;'>

--
Rob

>
No its not the baody margin. its padding inside the heading.

As someone else posted, if you are referring to the space between your
red border on h2 and the text inside h2, that is the effect of line
height. If you are referring to space between the red border and the
body (i.e. in this case the top of the view port in the browser window)
it is probably a combination of default margin on the h2 and default
padding on the body.

It is easy to test: did you actually try the suggested changes to
body and h2 (i.e. styling BOTH to have margin: 0; padding: 0;)?

Remember that the margin goes OUTSIDE the border, the padding goes
INSIDE (except, IIRC, in IE's broken quirks-mode box model?)

By the way, semantically speaking, the first header in your body
should be an h1 (first level heading). If this is too big for your
liking, you can always override the browser's default size by
styling it accordingly.

<h1>This is the main heading for the content</h1>
<h2>This is the first section sub-heading</h2>
<h3>This is a subsection sub-heading!</h3>
<p>Etc.</p>

**rodeored** · Nov 7 '08, 08:55 PM

Re: Padding is not zero

On Nov 7, 6:50 am, Bergamot <berga...@visi. comwrote:

rodeored wrote:

On Nov 7, 3:04 am, Johannes Koch <k...@w3develop ment.dewrote:

rodeored schrieb:

>

page:http://reenie.org/test/blockpadding.htm
<body>
<h2 style='padding: 0; border:solid 1px red;'>A bunch of text</h2>
</body>

>

Why is there padding in the heading, above and below the text, and how
do I get rid of it ?

>

If it were padding it were _inside_ the border. So it's h2's default
probably margin.

>

it is is padding inside the heading. . it is not a margin. it is
padding.

>
No, it is not padding. Inside the borders, that extra space above and
below the text is part of the default line-height - space reserved for
character ascenders (e.g. Ñ) and descenders (y). You may or may not be
able to get rid of it by changing the line-height to something less than
1, but beware that if line wrapping occurs, text may overlap. It will
certainly be harder to read.
>
--
Berg

Thanks, that makes sense.

**Jukka K. Korpela** · Nov 8 '08, 01:05 PM

Re: Padding is not zero

Bergamot wrote:

Inside the borders, that extra space above and
below the text is part of the default line-height - space reserved for
character ascenders (e.g. Ñ) and descenders (y).

That's probably a helpful informal description, but it's not technically
quite correct.

Consider an element like <div>N</divwith border: solid 1px and with
padding not set (or, for definiteness, padding explicitly set to 0). A naive
assumption might be that the border touches "N" both at the top and at the
bottom. But as you note, it turns out that this would be pragmatically all
wrong.

But even if you consider <div>Ñy</div>, you probably see (depending on font
etc.) that there is still some space above the tilde and below the descender
of "y".

Next, if you set line-height: 1 (making line height equal to the size of the
font, i.e. the nominal height of the font), you will see variation: there
might still be spacing, or the tilde or the descender might cross the
border. This is simply a matter of font design.

There is fairly popular belief saying that font size is the overall height
of the font, including ascenders and descenders and diacritic marks. It is
second-best approximation to truth in this matter and surely much better
than most of what we see written about font size. But it really cannot be
the whole truth. A simple proof is that by character code standards,
diacritic marks can be stacked with no pre-set limitation, and apparently
you go out of bounds at _some_ point.

The truth is that font size is a property assigned to the font by the font
designer, normally expected to provide sufficient height for all characters
including the fancy stuff, but the designer may design otherwise. One can
also say that a font designer works inside a square, the em square, and
designs glyphs inside it but not necessary utilizing the full height (and
hardly ever the full width, for Latin letters at least) and, on the other
hand, feeling free to cross the limits occasionally when he decides so. A
typical example is the letter Å, A with a ring above, occurring in
Scandinavian languages. Due to the nature of the ring, the letter very often
extends beyond the "upper limit" of the font - and there might even be
another diacritic, like the acute, above the circle, in some languages.

When you have set line-height: 1 (which I mention for a frame of reference
only - it is almost always too small, but sometimes suitable when you really
know and understand your text and context and their stability) and padding:
0, then there is no space between a border and the font height, though of
course individual letters almost always consume less than the full height of
the font.

And of course, in a more common situation, there are different types of
spacing between, say, your letter "a" and the bottom and top border of the
box where it resides: spacing cause by the fact that "a" is not as tall as
the height of the font; the leading, i.e. spacing caused by line-height
being larger than 1 as it usually is and should be; and padding, if set to a
nonzero value.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Padding is not zero

Padding is not zero

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment