Register - Login
Views: 95765881
Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies
11-15-18 08:04:02 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: 429966
For next: 11343

Since: 10-10-14

From: Brazil

Since last post: 5 hours
Last activity: 5 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: 250033802
For next: 495209

Since: 07-03-07

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

Since last post: 14 hours
Last activity: 7 hours

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: 518769
For next: 2593

Since: 02-24-13

From: your dreams

Since last post: 9 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: 250033802
For next: 495209

Since: 07-03-07

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

Since last post: 14 hours
Last activity: 7 hours

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.

27 database queries.
Query execution time: 0.171131 seconds
Script execution time: 0.008460 seconds
Total render time: 0.179591 seconds