Greetings Code Gurus,
I find myself grappling with an unexpected CSS anomaly while developing a website.
Here is the puzzling code snippet:
<div id="..." style="padding-bottom: 78px; padding-top: 78px;" >...</div>
These styles are manifesting on elements that have not been explicitly given these properties in the source code. Even upon inspecting the page source, there is no trace of such styling!
Hence, my query arises - what could be triggering the generation of these mysterious styles?
In the specific scenario I am dealing with, the <div> element has the following CSS assignments:
position: absolute;
top: 0px;
right: 0px;
height: 100%;
-moz-box-align: center;
-moz-box-pack: center;
display: -moz-box;
padding-bottom: 15px;
padding-top: 15px;
box-sizing: border-box;
Regardless of the browser being used (Firefox/Chrome/Internet Explorer), it is evident that the padding-top and padding-bottom styles are being overridden by the aforementioned inline styles.
What crucial detail am I overlooking here? Where should I begin my investigation for clues?