Register - Login
Views: 95784379
Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies
11-17-18 03:55:05 AM

Jul - Craziness Domain - CSS IS AWESOME New poll - New thread - New reply
Next newer thread | Next older thread
RanAS
Member
Level: 40


Posts: 490/498
EXP: 430229
For next: 11080

Since: 10-10-14

From: Brazil

Since last post: 2 days
Last activity: 12 hours

Posted on 11-04-18 07:04:11 PM Link | Quote
Originally posted by Xkeeper
CSS
IS
AWESOME



Today I just learned that if you:
  • Create a page using HTML5 via <!DOCTYPE html>

  • Apply a certain font size to the page, like say, 10pt for example.

  • Have an inline element like <span> somewhere.

  • Try to apply font-size: smaller; or really, try to use any font-size smaller than the page's default one.

It'll still occupy the exact same vertical space as if it had normal text in it, even if you set the font-size to zero. That's because the CSS specification says that inline-elements should, initially, contain a box that is at the very least 0px wide and the exact same height as the font occupies on its parent element. This stupid thing is called a strut, and getting it to work properly is a pain.

So if you have <div style="font-size: smaller; border: 1px solid #000;">Test text.</div>, then shrinking the text will shrink the div too, but if you have <span style="font-size: smaller; border: 1px solid #000;">Test text.</span>, then shrinking the text will NOT shrink the space reserved for the span element, because that would make too much sense.

This only happens in HTML4 Strict and in HTML5.
Xkeeper

Level: 250


Posts: 24653/24691
EXP: 250088795
For next: 440216

Since: 07-03-07

Pronouns: they/them, she/her, etc.

Since last post: 2 days
Last activity: 2 days

Posted on 11-04-18 07:09:25 PM Link | Quote

<div><span style="font-size: 2px;"><span>this is dumb</span></span></div>
StapleButter
Member
Level: 42


Posts: 504/505
EXP: 518996
For next: 2366

Since: 02-24-13

From: your dreams

Since last post: 11 days
Last activity: 1 day

Posted on 11-04-18 07:24:04 PM Link | Quote
don't get me started on shit like trying to get an element to occupy all the height of its parent (for example, having a post layout fit the whole post box even for small posts)


>just set height or min-height to 100%


nah, too easy

"lol can't work because the parent doesn't have a precise height set!"

solutions?

1. set every element's height to 100%, up to body/html
2. hardcode a min-height

your pick.
Xkeeper

Level: 250


Posts: 24669/24691
EXP: 250088795
For next: 440216

Since: 07-03-07

Pronouns: they/them, she/her, etc.

Since last post: 2 days
Last activity: 2 days

Posted on 11-08-18 02:31:03 AM Link | Quote
The concept of "height" and "vertical alignment" has definitely never been one of CSS's strong points, that's for sure. The original solution was usually to just enforce a minimum height one way or another, or somehow utilize the outer container, but even that doesn't really work sometimes.

My favorite thing is when <body> and <html> are different sizes.
Next newer thread | Next older thread
Jul - Craziness Domain - CSS IS AWESOME New poll - New thread - New reply




Rusted Logic

Acmlmboard - commit 220d144 [2018-11-04]
©2000-2018 Acmlm, Xkeeper, Inuyasha, et al.

29 database queries.
Query execution time: 0.276366 seconds
Script execution time: 0.008673 seconds
Total render time: 0.285040 seconds