Unable to locate the default margin for the body element in the browser's default stylesheet

Recently, I created a basic html file.

<h1 class="one">Hello</h1>

While inspecting the margin for the body element in Firefox (version 90.0.2 64 bit), I noticed it was set to 8px. Curiously, this value seemed to originate from the default browser style sheet. Further investigation led me to the default style sheet located at 

resource://gre-resources/forms.css
in Firefox. However, upon examination, I couldn't pinpoint where the margin: 8px for the body element was specified. Can someone shed light on this mystery?

htmlcss

Answer №1

The primary style sheet for firefox can be located at 

resource://gre-resources/html.css
. Within this file, you will discover the following snippet:

body {
  display: block;
  margin: 8px;
}

(in my personal instance, on line 122)

Answer №2

It seems like the margin style for body is actually coming from the 

resource://gre-resources/html.css
file, not where you were searching for it originally.

body {
  display: block;
  margin: 8px;
}

Take a look at this image for reference:

https://i.sstatic.net/mPg0m.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A JavaScript code snippet that stores the total number of bytes read from a CSV file in a variable

I currently have a CSV file located on a web server that is regularly updated with numeric and string data of varying lengths. I am seeking a solution to calculate the total byte values of each row when reading the file, as the byte count is crucial due ...

javascriptajaxhtml

Two divisions placed side by side

The current structure I am working with looks like this: <div id="container"> <div id="msg"><p>Lorem ipsum dolor sit amet.</p></div> <div id="img"><div id="content"></div></div> </div> # ...

htmlcss

What are some ways I can ensure my webpage is responsive and adjusts according to different screen sizes?

When I switch between viewing my website on my desktop monitor and my laptop, I'm facing issues with the content alignment. It displays perfectly on the desktop but is out of place on the laptop. <meta name="viewport" content="width ...

htmlbootstrap-4

Mastering the Bootstrap 'Thumbnail Grid System'

I'm having trouble aligning all the images in my design. Even though I'm using Bootstrap's column classes (class="col-sm-4 col-md-3"), they are not displaying equally. Here is a screen recording showcasing the issue: Click here to see the s ...

pythonhtmlcssjinja2

Using Webpack to set up CSS aliases: Step-by-step guide

Utilizing Webpack allows us to establish resolve aliases and integrate them within our CSS stylesheets. resolve: { extensions: ['.js', '.vue', '.json', '.scss', '.css'], alias: { 'fonts& ...

csswebpacksassvue.js

Is it possible to have separate click functions for the onclick attribute and jQuery click handler on an anchor tag, instead of just calling one function through onclick?

Attempting to implement multiple click handlers for an anchor tag: one using the "Onclick" attribute handler and the other using a jQuery click handler. This excerpt is from my HTML file. <html> <head> <script src="http://code.jquery.com ...

javascriptjqueryhtml

Tips on adjusting font color without activating the :visited state

Currently, I have set up the following HTML and CSS: <div id = "navi"> <ul> <li><a id = "topLinks" class = "currentPage" href = "index.html"> Home </a></li> <li><a id ...

htmlcss

Converting coordinates to pixel-based fixed positioning in CSS

After creating an animated square pie chart using basic CSS to display it in a grid format, I am now looking to transform the larger squares into a state map grid. Any ideas on how to achieve this? In my JavaScript code snippet below, I believe there is a ...

javascripthtmlcsswaffle-chart

Discovering multiple classes in a CSS file can be achieved by using specific selectors and searching

I am attempting to phrase my question differently: As mentioned in a book: "multiple classes: p.testorosso.grassetto {color: red; font-weight: bold;} This rule will apply the specified styles to all elements that contain the names of the defined classes ...

css

Ways to Ensure the Footer Stays Beneath Your Image Gallery

After successfully keeping the footer at the bottom of other pages on my website, I'm facing a challenge with my photo gallery page. The footer stubbornly sits in the middle of the page. :( This is the HTML code for that particular page: html { ...

htmlcsssticky-footer

Ensure your mobile site is optimized for full width display

Imagine a webpage with a fixed width of 1280px. Is there a way to instruct a smartphone to automatically scale this page to full width upon loading? Currently, I am using: <meta name="viewport" content="width=1280, initial-scale=1"> However, it d ...

htmlcssmobile

Using double quotes when adding HTML5 local storage entries

Currently, I am setting the value of a field to a variable like this: newUser = document.getElementById('userName').value; Then putting that variable into local storage: localStorage.setItem('userName', JSON.stringify(newUser)); Fet ...

jsonhtmllocal-storage

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

I came across this amazing plugin called "The Wall" but unfortunately, neither the documentation nor the examples demonstrate how to utilize JSON objects with it. Imagine we have a JSON array like: [ { href : "/my/photo/image1.jpg", title : "Me an ...

javascripthtmljsonmootools

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

htmlcsscheckboxcss-selectors

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

htmlcss

Incorporate a dynamic fading effect for text and images using JQuery

I successfully implemented a Crossfade effect using Jquery: function doAnimationLoop(o, n, t, i, a) { fadeInOut(o, n, t, i, function() { setTimeout(function() { doAnimationLoop(o, n, t, i, a) }, a) ...

javascriptjqueryhtmlcss

Stop the Bootstrap navbar from breaking into separate lines when resizing the screen by ensuring it collapses into an icon

I have a straightforward Bootstrap Navbar that contains just a few items. When the width is less than 768, it displays in two rows. How can I make both items display in a single row at all widths without using the collapse feature? <nav class="na ...

csstwitter-bootstraptwitter-bootstrap-3

Is there a way to automatically close the Foundation topbar menu when a link is selected?

On my single page website, I am utilizing Zurb Foundation's fixed topbar which includes anchor links to different sections of the page. My goal is to have the mobile menu close automatically whenever a link inside it is clicked. As it stands now, whe ...

javascripthtmlcsszurb-foundation

Dash - Add personalized HTML component

I am currently developing a Dash application in Python to showcase the results of some Topic Analysis that I have conducted. In order to visualize the topics, I used a tool called pyLDAvis which provides a nice visualization output saved as an html file na ...

pythonhtmliframeplotly-dash

Run a script on an ajax requested page prior to the page being loaded

My website navigation utilizes AJAX for seamless transitions between pages. Specifically, I have two pages: index.html and profile.html. The structure of both pages is as follows: <html> <head> <script src="script1.js" type="text/javascript ...

javascriptjqueryhtmlajax