473,734 Members | 2,514 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Inline-level elements: line-height, padding and background

Here are two cases regarding inline-level elements' line-height,
padding and background, which I doesn't understand:

<div style="backgrou nd: black; color: white; line-height: 1.5">
<span>Abc</span>
<span style="backgrou nd: white; color: black; line-height:
3">Abc</span>
<span>Abc</span>
</div>

Why doesn't the middle SPAN element have white background area tall
as 3em, but has white only behind the letters?

<div style="backgrou nd: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="backgrou nd: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?

--
Stanimir
Jul 20 '05 #1
12 6733
/Stanimir Stamenkov/:
Here are two cases regarding inline-level elements' line-height, padding
and background, which I doesn't understand:


Eh - no real CSSers around, really!? :-)

--
Stanimir
Jul 20 '05 #2
On Tue, 06 Apr 2004 19:54:34 +0300, Stanimir Stamenkov wrote:
/Stanimir Stamenkov/:
Here are two cases regarding inline-level elements' line-height, padding
and background, which I doesn't understand:


Eh - no real CSSers around, really!? :-)


Apparently not in the 1hr 15mins
since you posted the question, no.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 20 '05 #3
On Tue, 06 Apr 2004 18:47:06 GMT, Andrew Thompson wrote:
On Tue, 06 Apr 2004 19:54:34 +0300, Stanimir Stamenkov wrote:
/Stanimir Stamenkov/:
Here are two cases regarding inline-level elements' line-height, padding
and background, which I doesn't understand:


Eh - no real CSSers around, really!? :-)


Apparently not in the 1hr 15mins
since you posted the question, no.


Ooops!! Try *3 days* 1hr 15mins.
Yeah, OK. Slight difference.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 20 '05 #4
In article <1g************ *************** ****@40tude.net >,
Andrew Thompson <Se********@www .invalid> wrote:
On Tue, 06 Apr 2004 18:47:06 GMT, Andrew Thompson wrote:
On Tue, 06 Apr 2004 19:54:34 +0300, Stanimir Stamenkov wrote:
/Stanimir Stamenkov/:

Here are two cases regarding inline-level elements' line-height, padding
and background, which I doesn't understand:

Eh - no real CSSers around, really!? :-)


Apparently not in the 1hr 15mins
since you posted the question, no.


Ooops!! Try *3 days* 1hr 15mins.
Yeah, OK. Slight difference.


I looked at your code in a couple browsers (duplicating your results)
and read the CSS1 spec, but still have no answer for you. But I'm not
a CSS expert . . . yet.

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
"This is the world we live in / And these are the hands we're given
Use them and let's start trying / To make it a place worth living in"
-- Genesis, "Land of Confusion"
Jul 20 '05 #5
/Lee K. Seitz/:
I looked at your code in a couple browsers (duplicating your results)
and read the CSS1 spec, but still have no answer for you. But I'm not
a CSS expert . . . yet.


Thank you, for looking at it, Lee.

I'm puzzled with these two related issues since long time but now
I've decided to ask the experts... it is that I'm still waiting for
one to come up. :-)

--
Stanimir
Jul 20 '05 #6
Stanimir Stamenkov <s7****@netscap e.net> wrote:
Here are two cases regarding inline-level elements' line-height,
padding and background, which I doesn't understand:
The short answer is that the relationship between element boxes and
line boxes is not always obvious.

line-height determines the spacing between the baselines of adjacent
line boxes. It does not determine the height of any element boxes that
happen to lie within those line boxes.

This last point is not clear in CSS 2 where the text refers to "height
of each box generated by the element". CSS 2.1 clarifies this by
saying "height that is used in the calculation of the line box
height".
- section 10.8.1
<div style="backgrou nd: black; color: white; line-height: 1.5">
<span>Abc</span>
<span style="backgrou nd: white; color: black; line-height:
3">Abc</span>
<span>Abc</span>
</div>

Why doesn't the middle SPAN element have white background area tall
as 3em, but has white only behind the letters?
Any line boxes within this div are (font-size * 1.5) high except for
the line box that contains the middle span which is (font-size * 3)
high.

The span elements have a height determined by font-size alone.
<div style="backgrou nd: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="backgrou nd: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?


Any line boxes within this div are (font-size * 1.5) high. The height
of the div is the sum of the heights of all the line boxes it
contains.

The span element has a height determined by font-size, and then there
is padding in addition to that height.

As the padding does not affect the font size, it does not affect the
line-height, and thus does not affect the height of the div.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 20 '05 #7
/Steve Pugh/:
The span elements have a height determined by font-size alone.
O.k. I've observed it prior asking, already. Just I hadn't found
clear explanation in the spec, before. But the next part:
Stanimir Stamenkov <s7****@netscap e.net> wrote:
<div style="backgrou nd: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="backgrou nd: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?
Any line boxes within this div are (font-size * 1.5) high. The height
of the div is the sum of the heights of all the line boxes it
contains.


Yes, that's fine. It is clear - the height of the DIV is (1.5 *
font-size)
The span element has a height determined by font-size, and then there
is padding in addition to that height.
So the SPAN element gets height of (font-size + (0.25 + 0.25) *
font-size) which is equivalent to (1.5 * font-size).
As the padding does not affect the font size, it does not affect the
line-height, and thus does not affect the height of the div.


The thing about the padding of an inline-level element doesn't
affect the line height is probably another unclear issue, but
nevertheless your answer doesn't reveal why:

(1.5 * font-size) - the DIV height

is not equal to (doesn't produce equal height background areas)

(1.5 * font-size) - the SPAN height

where the 'font-size' is same in the both expressions... ?

--
Stanimir
Jul 20 '05 #8
Stanimir Stamenkov <s7****@netscap e.net> wrote:
/Steve Pugh/:
The span elements have a height determined by font-size alone.


O.k. I've observed it prior asking, already. Just I hadn't found
clear explanation in the spec, before. But the next part:
Stanimir Stamenkov <s7****@netscap e.net> wrote:
<div style="backgrou nd: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="backgrou nd: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?


Any line boxes within this div are (font-size * 1.5) high. The height
of the div is the sum of the heights of all the line boxes it
contains.


Yes, that's fine. It is clear - the height of the DIV is (1.5 *
font-size)
The span element has a height determined by font-size, and then there
is padding in addition to that height.


So the SPAN element gets height of (font-size + (0.25 + 0.25) *
font-size) which is equivalent to (1.5 * font-size).


No. The span element gets height of font-size. Padding does not
contribute to height.

But padding does use background-color, so the height of the
background-colored region is indeed (font-size + (font-size * (0.25 +
0.25)))
As the padding does not affect the font size, it does not affect the
line-height, and thus does not affect the height of the div.


The thing about the padding of an inline-level element doesn't
affect the line height is probably another unclear issue, but
nevertheless your answer doesn't reveal why:

(1.5 * font-size) - the DIV height

is not equal to (doesn't produce equal height background areas)

(1.5 * font-size) - the SPAN height

where the 'font-size' is same in the both expressions... ?


The height of the span is the same as the height of the div. But,
unless you are using the broken IE box model, padding goes outside of
height, and background colour affects padding as well as the content
area.

As the spec says:
"Although margins, borders, and padding of non-replaced elements do
not enter into the line box calculation, they are still rendered
around inline boxes. This means that if the height specified by
'line-height' is less than the content height of contained boxes,
backgrounds and colors of padding and borders may "bleed" into
adjoining line boxes. User agents should render the boxes in document
order. This will cause the borders on subsequent lines to paint over
the borders and text of previous lines."

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 20 '05 #9
>>>> <div style="backgrou nd: black; color: white; line-height: 1.5;
font-size: 3em">
<span>Abc</span>
<span style="backgrou nd: green; color: black; padding:
0.25em">Abc</span>
<span>Abc</span>
</div>

Why in the above example the green background area crosses the top
and bottom edges of the black background area?

/Steve Pugh/:
No. The span element gets height of font-size. Padding does not
contribute to height.

But padding does use background-color, so the height of the
background-colored region is indeed (font-size + (font-size * (0.25 +
0.25)))
Sorry, my bad. I've meant exactly:

The SPAN element gets background area tall as (1.5 * font-size).
Stanimir Stamenkov <s7****@netscap e.net> wrote:
why:

(1.5 * font-size) - the DIV height

is not equal to (doesn't produce equal height background areas)

(1.5 * font-size) - the SPAN height

where the 'font-size' is same in the both expressions... ?
The height of the span is the same as the height of the div. But,
unless you are using the broken IE box model, padding goes outside of
height, and background colour affects padding as well as the content
area.


To "normalize" things:

The DIV background area (if there's no wrapping) is tall as the
line-height which is (1.5 * font-size) and the height of the SPAN is
(1 * font-size), but like you wrote and cite the spec below, it
should get background area tall as (height + padding-top +
padding-bottom) which again is (1.5 * font-size).

So, once again: Why the SPAN background area gets rendered taller
(just a little bit but still taller) than the DIV background area?
As the spec says:
"Although margins, borders, and padding of non-replaced elements do
not enter into the line box calculation, they are still rendered
around inline boxes. This means that if the height specified by
'line-height' is less than the content height of contained boxes,
backgrounds and colors of padding and borders may "bleed" into
adjoining line boxes. User agents should render the boxes in document
order. This will cause the borders on subsequent lines to paint over
the borders and text of previous lines."


--
Stanimir
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
6567
by: A | last post by:
Hi, I'm having problems completing a project in C++. I have been using inline functions in some of my header files. I have only done so for simple functions that only have 1 statement (eg. accessor and mutator methods to access private data members). I would like to know if there are any issues with using inline functions that may have attributed to my errors before I start separting them out into "outline functions". Regards
14
2781
by: Chris Mantoulidis | last post by:
I am not clear with the use of the keyword inline... I believe you add it do a function when you implement the function inside the header file where the class is stored... But is that all? What am I missing? If that's all, then why did Bjarne even bother adding it to the language? If that's not all, what else can I do with "inline"?
47
3874
by: Richard Hayden | last post by:
Hi, I have the following code: /******************************** file1.c #include <iostream> extern void dummy(); inline int testfunc() {
21
746
by: Rubén Campos | last post by:
I haven't found any previous message related to what I'm going to ask here, but accept my anticipated excuses if I'm wrong. I want to ask about the real usefulness of the 'inline' keyword. I've read many authors (and it's my belief, too) who discourage the use of the 'inline' keyword, because: - The 'inline' word only advice the compiler about wich functions should be expanded, but not force it to expand them. Also, the compiler can...
20
3143
by: Grumble | last post by:
Hello everyone, As far as I understand, the 'inline' keyword is a hint for the compiler to consider the function in question as a candidate for inlining, yes? What happens when a function with extern linkage is inlined? Should the compiler still export the function? Or is an inlined function implicitly static?
7
2859
by: Srini | last post by:
Hello, Rules for inline functions say that they have to be defined in the same compilation unit as their declarations. For class member functions this means that the inline member functions must be defined either within the class or within the same header file. But its generally a good programming practice to have the declarations and definitions in seperate files. This would make the future maintenance of the code easier.
9
2897
by: chinu | last post by:
hi all, i did a small experiment to grasp the advantages of declaring a function as inline. inline int fun1(); int main(){ unsigned int start=0,end=0; asm("rdtsc\n\t"
5
1922
by: Barry | last post by:
Hi, group First, I write same cases I've already known, I don't concern that specific compiler really do inline or not. Please check them if they are right, and add the cases I miss 1. // a.h inline void f() {}
2
1555
by: Barry | last post by:
Hi, group First, I write same cases I've already known, I don't concern that specific compiler really do inline or not. Please check them if they are right, and add the cases I miss 1. // a.h inline void f() {}
9
2127
by: Martin Wells | last post by:
Is there anything like __inline_is_supported to indicate whether a certain C compiler supports inline? I'm writing my code as fully portable C89, but I want to use inline. Martin
0
8946
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8777
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9452
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9310
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9237
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8187
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6737
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6033
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4551
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.