Last active
November 2, 2024 15:48
-
-
Save jsonbecker/b9ae1acf3523524fce0da676e36e59d2 to your computer and use it in GitHub Desktop.
Showing how the user of flex and flex direction behaves different.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>jsonbecker</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body { | |
| margin: 40px; | |
| } | |
| main, | |
| .content { | |
| max-width: 80ch; | |
| margin: 0 auto; | |
| } | |
| .title-area .date { | |
| font-weight: 400; | |
| margin-bottom: 0px; | |
| margin-left: -12rem; | |
| position: absolute; | |
| width: 150px; | |
| display: block; | |
| padding-left: 0.5rem; | |
| text-align: right; | |
| } | |
| .title-area { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main id="content"> | |
| <article class="h-entry"> | |
| <div class="title-area"> | |
| <time class="date dt-published" datetime="2024-11-01T16:44:56-0400" style="padding-top:0rem;"> | |
| <a class="u-url" href="https://example.com"> | |
| 4:44PM | |
| </a> | |
| </time> | |
| </div> | |
| <div class="post-content e-content"> | |
| <p>I finally just took off my strings, did a quick wipe down, and put new ones on. It took all of 20 minutes, and I’ve been putting it off for 2 weeks. Just like everything else I do in life.</p> | |
| </div> | |
| </article> | |
| <article class="h-entry"> | |
| <div class="title-area"> | |
| <time class="date dt-published" datetime="2024-11-02T16:44:56-0400" style="padding-top:0rem;"> | |
| <a class="u-url" href="https://example.com"> | |
| 4:14PM | |
| </a> | |
| </time> | |
| </div> | |
| <div class="post-content e-content"> | |
| <p>I finally just took off my strings, did a quick wipe down, and put new ones on. It took all of 20 minutes, and I’ve been putting it off for 2 weeks. Just like everything else I do in life.</p> | |
| </div> | |
| </article> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Turns out line 31-33 is the culprit. I need to look into why I had that option set, but in Firefox and Chrome, this creates an extra rem of margin between the paragraph and the top of the
title-areadiv, whereas in Safari, the presence or exclusion of this style has no impact.