5 ms·
Body Margin 8px
- culi 4y agoThis is the kind of stuff that makes me feel like learning frontend is more similar to learning history than learning math Really fun read :)
- rgbrgb 4y agoI’d say it’s more like painting… a bit of both plus the end result has to be “good” for the tech(nique) to matter.
- leppr 4y agoThat's a very accurate statement for what it was like 5 to 10 years ago. But nowadays with resets, saner modern browser APIs, polyfills, build steps, and frameworks, compiled into starter projects, it's much more systematic.
- amelius 4y agoThe math required for building most websites is elementary school level anyway.
- quickthrower2 4y agoIt makes sense as HTML was a document format. Document: thing you print, in this case on 90s printers. You need a margin! The genius is you get a reasonable reading experience out of the box with default styles. Noone wants their first character kissing the browser window frame.
- quickthrower2 4y agoIt makes sense as HTML was a document format. Document: thing you print, in this case on 90s printers. You need a margin! The genius is you get a reasonable reading experience out of the box with default styles. Noone wants their first character kissing the browser window frame. I am betting what is old is new and 8px borders will come back in fashion.
- IfOnlyYouKnew 4y ago"A thing you print" just isn't the definition of a document.
- dgb23 4y agoWe obviously put margins on stuff, but never at the body element for many reasons. Padding would be better for example. The margin only makes sense if you don’t apply any further styling.
- asojfdowgh 4y agoMargins collapse if you have h1 with top margin 10px, and body margin 8px, it "adds" up to 10px, not 18px. Once you write article-based sites, without a random navbar that people don't want, then it can become quite nice
- zaphar 4y agoI hate it when a site has no margin and everything pushes up against the edge of the browser. It's hard to read and annoying as all get out so I think if you are going to remove the default of margin: 8px you should probably replace it with something sensible that prevents running up against the edge of the browser.
- emmatemma 4y agoGreat, we’ll written read.
- pronlover723 4y ago> That initial value is the same for all elements across the entire web. The initial value of display is inline, and the initial value of every margin property is 0. What? Pre and H1 do not have an initial margin of 0 and plenty of elements do not have an initial display of inline Confused.
- masswerk 4y agoThat is before any default or user styles are applied, which are in turn overwritten by author styles. (Think of the default values of a base object or base class, which are then overwritten by the constructor or more specific methods.)
- minitech 4y agoThe three paragraphs that follow explain, including > This is why we need browser styles, which provide different defaults from one element to the next. Some elements should be display: block (divs, paragraphs, lists, headings, etc), and some of those elements should have margins on them to improve readability. If you apply the rule h1 { display: initial; margin: initial; } you’ll get an inline h1 with no margin.
- nightpool 4y agoThis is the difference between the *initial* value, which is the SAME for all elements, and the *default* value, which is based on the user-agent stylesheet. Every property has one single "initial" value, which doesn't change from element to element, but can get overridden by the user-agent for individual elements.
- DarmokJalad1701 4y agoIs it just me or is the scrolling on that site horrendously laggy?
- lutrinus 4y agoIt's not just you. After expanding the historic base stylesheet, Chrome even crashed for me (using a Pixel 6).
- petepete 4y agoWorks much better in Firefox than Chrome for me.
- amelius 4y agoPerhaps disable the CSS, if you can stand the 8px margin :)
- AdrianB1 4y agoIt works fine in Edge, using the same engine as Chrome.
- onnnon 4y agoYep, website is unusable for me in Chrome due to scrolling lag.
- irrational 4y agoTIL there is a W3C default stylesheet. I’ve been doing web development since the mid-90s, but this is the first I’ve heard of this.
- chrismorgan 4y ago> I’m not sure if there’s a more recent version somewhere, but I couldn’t find it? It’s in the HTML spec now, https://html.spec.whatwg.org/multipage/rendering.html https://html.spec.whatwg.org/multipage/rendering.html, broken up into smaller pieces, and with more prose around it. There’s a lot more of it than the old one, partly due to newer stuff, partly due to CSS being able to express things that it couldn’t in the past, and partly due to covering stuff that was just missing back when it was part of the CSS spec (e.g. nobr clearly and obviously implies white-space: nowrap, but that was missing from the old user-agent stylesheet). Some parts end up prose descriptions instead of simple rules, too, as is seen in the titular body margin, which is described in <https://html.spec.whatwg.org/multipage/rendering.html#the-page https://html.spec.whatwg.org/multipage/rendering.html#the-pa...> as coming from several attributes, with 8px being a fallback.
- rawoke083600 4y agoSomewhat related.(if you squint hard) @Google, @Youtube. Please FIX your video-player controls. Add a MARGIN to the on-screen display: You know the "little" go-fullscreen-button on the bottom-right of the video that sits 0.0000000001mm above the 'interactive' timeline. How many times I've pressed the 'timeline' instead of the fullscreen-button and then 'ended' the video and had to actually go into my youtube-history to reload video. If you going to judge my websites with CLS,LCP and all that you can do better with UI as well.
- wruza 4y agoOh don’t start it! Youtube player ui alone is so broken as if they consulted a donkey to create it. Timeline may receive a focus (blue outline) so that when you later press up/down to adjust volume, it instead jumps 5 seconds away. You cannot click on 0:00, because it’s inaccessible for some reason. But you can do that by accidentally pressing numpad 0 instead of or together with a right arrow. If you are seeking a frame by thumbnail and move away the slightest, thumbnails disappear. Or they never load, but youtube shows you any previous frame instead of a black box, even if it is 50 minutes away. If you miss your cursor on a tiny volume bar, it scrolls to description. Arguable but annoying. They can’t figure out how to hide a cursor after a while, so you have to move it to the right and ignore 1x10 bar on your screen. And instead of showing a map of options in the settings button, it presents a stupid hierarchical menu, so you have to pause video every time to figure out what you need to click on. I could go on with entire ui, but chances that this will be fixed is zero, because some manager once “proved” something about it all likely.
- myfonj 4y agoMy most favourite YouTube player usability WTF was keyboard play state toggling with focused play/pause button. It is actually fixed at this point, but for a very long time there was a 'collision' (respective parallel processing) of the page-wide space-bar handler that toggles playback and the actual "click" event handler of the play/pause button that can be triggered with the space key as well. As a result, if you started play by clicking the play button under seeker (focussing it in effect) and later decided to pause the video by pressing the space-bar, it briefly paused the video (play->pause from the button click handler) and immediately triggered pause->play from the global handler (or other way round). So to actually pause the video with keyboard you had to shift-tab away from the invisibly-focussed (!) play button to the seeker and only then used the space key to trigger the global handler alone. It always left me flabbergasted how such blatant UX flaw could remain unattended in such prominent service for that long.
- idk1 4y agoThere a certain argument to be made that the 8px margin may be essential to the success of the entire internet. What if it would not have taken off in the 90s if people didn't like how it printed off?
- chairmanwow1 4y agoThis strikes me as a pretty meaningless position. I kept waiting for the punchline, and got nothing.
- j3th9n 4y agoThis website is instantly heating up my laptop and scrolling through it is far from smooth, like 10 FPS.
- layer8 4y agoComments mention printing, but the simple reason is that there is always some margin/padding around text in GUI controls. Look at text inputs, list boxes, menus, dialog boxes, Windows Notepad, whatever. So the client area of the first web browsers of course did the same and added some margin around the rendered text. Once web pages were enabled to specify a margin on their own, the previously existing margin became the default.