This question already has answers here:
Weird ul list issue in my case
(2 answers)
Closed 6 years ago.
I have been working on making a horizontal navigation bar for my site, but the top of the nav bar seems to be cut off and will not touch the top of the page.
I have tried using:
* {
padding: 0;
margin: 0;
}
However, that causes me to have to add padding to everything.
Is there any other way to fix it?
Fiddle: https://jsfiddle.net/bp2jnytc/
For your <h3> elements within your unordered lists, you could try:
h3 {
margin: 0;
padding: 15px;
}
And then for your <ul> element within your <header>:
header ul {
margin: 0;
}
There is nothing wrong with it, well, at least when I copied the code to my text editor and then ran it in chrome. I believe it to be a problem with how jsfiddle is displaying the information, not to do with your code.
Remove margin-top from the ul and the h3 tag. https://jsfiddle.net/bp2jnytc/2/
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Could anyone shed some light upon the source of the 8px whitespace at the bottom of the element box when inspected with DevTools?
/* No stylesheet - all CSS from DevTools on Chrome user agent stylesheet */
element.style {}
html {
display: block;
}
head {
display: none;
}
body {
display: block;
margin: 8px;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
<html>
<head></head>
<body>
<p>Hello, world</p>
</body>
</html>
Highlighting the <html> element box with DevTools shows its vertical dimension to be 189px:
Whilst from DevTools, the highlighted <body> element box has a total vertical dimension of 181px (including margins).
Why does the <html> element box extend down by 8px beyond the <body> element box at the bottom of the page?
Its called default margin set by the browser . If you want to reset everything to zero you can use
*{margin:0; padding:0;}
Browsers come with a surprising amount of CSS by default, which we call user-agent stylesheets. These styles are the reason that, without any CSS on our part, an <h1> is bigger than an <h2>, and why the <body> has a margin on it that we tend to always remove.
a
Like Kevin Powell writes on freecodecamp, it's quite normal to the following at the start of a new project.
body {
margin: 0;
}
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 1 year ago.
html,
body {
margin: 0;
padding: 0;
}
.tribute-header {
background-color: black;
color: white;
}
The above is my code and I am still seeing this space. Please refer to the image attached and the arrow shows the space I want to remove. Kindly help.
Add this to your code:
*{margin:0; padding:0; box-sizing: border-box;}
So the root of every element on your website will be as above.
This question already has answers here:
Margin-bottom for <a> link elements
(2 answers)
Closed 2 years ago.
.butn{
text-align:center;
margin-top: 15px;
margin-right: 5px;
color: white;
padding: 10px 15px;
background:black;
background-repeat: repeat-x;
position:relative;
}
<body>
Clear
</body>
What I am working on is href that works like a button function. However, when I try to position this so called "button" with anything margin related like margin-top and margin-right, it does not change the position of this href. So my question is how do I move the position of this (href with padding)
Put the margins in style attribute.
Clear
It seems margins of html <a></a> tag in a style like buttons doesn’t work. I faced the same problem and handled it like this.
I am not clear why this works(!?!). But I shared my experience.
Hope this helps!
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
Cant seem to find how to remove vertical space between two text elements, There are some similar problems on this website but doesn't seem to actually work.
HTML Code:
<p>this website is</p> <h1>Encrypted</h1>
it seems that I would have to use a position code, but when I use a position code that lets other elements get close to it, the text gets pushed to another spot on the website
Remove white space between elements using CSS:
Horizontal being (top and bottom space)
h1, p {
margin-top: 0;
margin-bottom: 0;
line-height: /* adjust to tweak wierd fonts */;
}
Vertical being (left and right space)
.parent {
font-size: 0;
line-height: 0;
}
h1, p {
font-size: 12px;
margin: 0;
display: inline-block;
}
JSFIDDLE
Every browser has pre-set styles for elements. p and header tags have margins set. You can change this by using margin: 0;: JS Fiddle
You may also benefit from using a CSS Reset to avoid these issues.
Also, I don't imagine a scenario where the word "encrypted" in your code should be using an <h1> tag: How to properly use h1