Issue
I am trying to code an index.html file to put into a github repository so that i can publish a static html website on github pages using css and html. I just realized today that there has been a 2px high footer on my page this entire time. I thought that this would be a simple fix, as I just googled my issue to find that many people had the same problem. After 2 hours of trying different solutions, I still have no idea what is causing the footer to be there, or how to get rid of it. I have ruled out the CSS code as the culprit, since if I go into codepen and delete all the CSS code, the white footer is still there. This is my first project using html and css, so I can't seem to really formulate a solution for myself.
Here is a link to it in codepen (also CSS is below): https://codepen.io/B0xTurtleGames/pen/BaMWboX
body, html
{
background: linear-gradient(to bottom,#0000ff,#00008b);
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
/*height: 100%; */
height: 100%;
width: 100%;
padding: 0;
cursor:url(https://i.postimg.cc/KvSw4f0x/pixil-frame-0-6.png), auto;
}
Here is the footer im talking about (hard to circle it on a school chromebook, tell me if you still have no idea where it is)
(the footer isn't white with the gradient, but I can't put any svg elements on it like i want to for some reason)
I am very new to web-based programming languages, so if anyone has a solution (preferably with an explanation) that would be amazing. Please ask for more information if that helps you solve this.
Also excuse the seizure-inducing color i have some refinements to make before publishing
Here is what I have already tried:
Setting the height and width attributes of the body, html{} tag in CSS to 100vh and 100vw respectively
setting the margin and padding to 0
Whatever this is:
<style>
header { border-bottom: none ! important; }
footer { border-top: none ! important; }
</style>
setting the margin-bottom attribute to a negative value
setting the min-height attribute in CSS to 100%
Solution
The display
property is set to inline
by default, which often causes extra space below elements. Changing to block
will eliminate unwanted space around the svg. You can read more about the display property here: CSS: display
svg {
display: block;
}
If you want a better explanation here are some readings:
Answered By - Jacob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.