This question have been asked before I'm aware of, but unfortunately still haven't found a solution. Even though I tried using their solutions.
My problem is that I can't get rid of the default 8px margin on around the body/html tag. It looks like that it doesn't even respond to the changes I put in between the curly brackets.
Html:
<div class="header">
Header123
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
</ul>
</div>
<div class="main">
Article
</div>
<div class="footer">Footer</div>
CSS:
body,html {
margin: 0;
text-align: center;
background-color: blue;
}
.container
{
margin: 0;
background-color: red;
}
.header
{
text-align: left;
height: 90px;
background-color: green;
margin: 0;
}
.nav
{
float: right;
}
.nav ul
{
list-style: none;
height: 30px;
padding: 0px;
margin: 0px;
}
.nav ul li
{
margin: 10px;
}
.footer
{
height:40px;
}
Link: https://jsfiddle.net/RasmusGodske/yg2gsa0t/
For HTML:
<body style="margin:0;padding:0">
For CSS:
body {margin:0;padding:0}
Probably you are having a difficulty because margin and padding are two different things. You should try both and use the one that suits your needs.
You can read more about margin vs padding from here
Remember: margin is outside an element's border; padding is inside.
You need to set the padding of the body element to zero. (The margin of the body element is meaningless; it'd represent a space outside the browser window!)
As an aside, you don't need to set any CSS properties on the html element. body already contains everything that you'd want to set properties on.
You can directly remove the margin using:
body { margin: 0; }
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 8 months ago.
I am trying to create a hero box but my herobox and navbar have white space inbetween. I can not get rid of it! I am guesing it has to do with flexbox and/or grid but i'm not sure.
I colored the nav purple and the herobox blue to try to figure why they don't follow each other. I tried messing with the margin and display in CSS.
Chrome inspection of elements:
My code so far:
body {
font-family: sans-serif;
margin: 0;
}
main {
margin-top: none;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
.topnav {
overflow: hidden;
background-color: blueviolet;
}
.left {
padding: 20px;
float: left;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: left;
}
.right {
padding: 20px;
float: right;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
#media screen and (max-width: 800px) {
.left,
.right {
width: 100%;
/* The width is 100%, when the viewport is 800px or smaller */
}
}
/*HERO BOX*/
.hero {
background-color: aqua;
}
h1 {
font-size: 15vw;
}
<header>
<!--NAVIGATION BAR-->
<nav>
<div class="topnav">
<div class="left">
<a href="#Coupons">
<p>Coupons!</p>
</a>
</div>
<div class="right">
<a href="#Order">
<p>Order Online!</p>
</a>
</div>
</div>
</nav>
</header>
<main>
<div class="hero">
<h1>Super Restaurant!</h1>
<button>View our menu!</button>
</div>
</main>
Solution
Set the h1 to margin-top: 0.
Explanation
The h1 has a margin-top that is creating the space with the header section.
This is happening because, even though the h1 is a descendant of the main element, its top margin is superseding the top margins of its ancestors (.hero and main).
And this is happening because of the rules of margin collapsing.
ยง 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin.
Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse, except [in certain cases].
Horizontal margins never collapse.
The top margin of an in-flow block element collapses with its first
in-flow block-level child's top margin if the element has no top
border, no top padding, and the child has no clearance.
It appears that the margin top on the header is causing the problem. try giving it a margin of 0 and giving it padding if you need and see what happens
h1 {
font-size: 15vw;
margin-top: 0;
}
Extra margin is from h1 (commented in code, info here).
Useful snippet for making completely own styling:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
Removes all margins and padding and also makes all elements same box-sizing.
Also, for example, re-create nav using grid styles, try to avoid float in positioning of elements, its intended for positioning images in text or etc.
body {
font-family: sans-serif;
margin: 0;
}
main {
margin-top: none;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
.topnav {
overflow: hidden;
background-color: blueviolet;
display:grid;
grid-template-columns:1fr 1fr;
}
.left {
padding: 20px;
place-self: center start;
box-sizing: border-box;
text-decoration: none;
}
.right {
padding: 20px;
place-self: center end;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
#media screen and (max-width: 800px) {
.topnav{
grid-template-columns:1fr;
}
}
/*HERO BOX*/
.hero {
background-color: aqua;
}
h1 {
font-size: 15vw;
margin-top:0; /* fix */
}
<header>
<!--NAVIGATION BAR-->
<nav>
<div class="topnav">
<div class="left">
<p>Coupons!</p>
</div>
<div class="right">
<p>Order Online!</p>
</div>
</div>
</nav>
</header>
<main>
<div class="hero">
<h1>Super Restaurant!</h1>
<button>View our menu!</button>
</div>
</main>
I'm trying to learn some basics of HTML by using jfiddle. This is what I've done.
https://jsfiddle.net/Lqn0jch3/
HTML
<body>
<div class="container">
<div class="sidebar">
<div class="logo"></div>
<div class="menu-options">
<p>yeeeeeep</p>
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
overflow-y: hidden;
}
.container {
background-color : #458748;
height: 100%;
}
.sidebar {
height: 100%;
width: 30%;
background-color : #000000;
}
.logo {
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/31/Britannia_Industries_Logo.svg/1280px-Britannia_Industries_Logo.svg.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 30%;
width: 100%;
text-align: center;
background-color: aqua;
}
.menu-options {
background-color: #FFFFFF;
}
p {
color: #000000;
}
But I can't understand why my 'menu-options' class is not being positioned just below the logo and there's some separation between them.
Thanks in advance.
is this what you want?
https://jsfiddle.net/Lqn0jch3/1/
i changed the css of p
p {
display: inline-block;
color: #000000;
}
the element <p> becomes margins by default, so changing its display or setting margin: 0px; would do the job for you
I've changed your class, modify the positioning to your needs:
.menu-options {
background-color: #FFFFFF;
position:relative;
top:-20px;
}
By default the browser adds margin to the top and bottom of the paragraph element, so to fix this you just have to change the margin to 0.
p {
margin: 0;
}
And you normally wouldn't use a paragraph element in a menu. An Unordered list works well. <ul> <li>
Separation between them is because of default margin style on element p
You can get diffrent default margin values on diffrent browsers, try using CSS Reset scripts.
I have this problem where one element is floated and I cannot set a padding to the other element on the same line because it appears in the beginning and not where I want it to.
FIDDLE
HTML
<header>
<h1>John Doe</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Game</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class='body'>
<section class="body_heading">
<h2>About Me</h2>
</section>
<aside>
<section>Lorem ipsum</section>
</aside>
<section class="body_content">lorem ipsum</section>
</div>
CSS
html, body {
min-height: 100%;
}
body {
background: #f1f1f1;
}
header {
background: #CAE5FF;
float:left;
height: 100%;
color: gray;
}
header > * {
padding: 5% 15%;
}
header > nav {
}
header > nav > ul {
list-style: none;
padding: 0;
margin: 0;
}
header > nav > ul > li {
}
.body {
padding: 1%;
}
aside {
float: right;
}
The problem is between the header and the .bodyelement I want to be a little space but padding doesn't affect it.
Use below Options
.body{overflow:hidden;} /* or */
.body{margin-left:125px;} /* width of left contents + 10 or 20 for some space */
The padding of 1% that you have specified on the div.body is working perfectly fine.
The problem lies in the fact that the header is floated and does not have a width. Also, the div.body is not floated. So, the div.body takes up all the width while the content gets shifted because of the left floated header.
This can be seen here: http://jsfiddle.net/2fyqqwjx/1/
See the green border of div.body ?
A very simple solution (with your current markup) would be to give a width to the header and provide an equivalent margin-left to your div.body:
* { box-sizing: border: box; }
html, body {
height: 100%; overflow: hidden;
}
header {
float: left;
height: 100%;
width: 20%; /* give a fixed width here */
}
.body {
padding: 1%; margin-left: 20%; /* give a margin-left equivalent to header width */
}
See this demo: http://jsfiddle.net/uc0rh9d0/1/
.
.body{padding-left:35% //whatever you want }
Give float:left; to .body it will be enough
Add margin-right to your header in CSS.
Here is the example
header {
background: #CAE5FF;
float:left;
height: 100%;
color: gray;
margin-right: 10px;
}
Example
There is a margin-bottom set for each sidebar-block of 10px, it appears as the inner div which is sidebar-block.body is flowing out of the container.
I researched and debugged and cannot find the cause for this, the only time I use floats is on the main #sidebar itself.
HTML
<div id="sidebar">
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">profile</div></div>
<div class="sidebar-block body"></div>
</div>
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">forum activity</div> </div>
<div class="sidebar-block body"></div>
</div>
</div>
CSS
#sidebar {
float: right;
width: 268px;
margin-top: 10px;
}
.sidebar-block {
margin-bottom: 10px;
}
.sidebar-block.title {
background-color: #2E392F;
min-height: 47px;
color: white;
font-size: 1.2em;
}
.sidebar-block.body {
overflow: hidden;
background-color: white;
}
.text-with-margin {
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
display: block;
}
Fixed, it was because I used .sidebar-block title, .sidebar-block body in a way so that the css for .sidebar-block would automatically be applied to them, not my intention so I renamed the divs.
According to your comment. Change your code for that
#sidebar > .sidebar-block
{
margin-bottom: 10px;
}
Demo: http://jsfiddle.net/fvjw5/1/
You have to set the maximum width of the Sidebar element.
As it is, the Sidebar element does not have a fixed size, which will nullify the
.text-with-margin {
width: 100%; // The width. You should change this.
...
}
See this post for information about position: CSS Positions
You should try something like:
#sidebar {
width: 100%; // Or whatever size you want the sidebar to be.
position: relative; // You can play with this for different results.
...
}
You can look at the information provided on the answer below:
Responsive web design
I know there have been many questions about ul auto indents, I've tried with no success many of those answers and I have the additional problem of when adding a container with padding, it seems to only pad one side.
Basically I'm trying to get a ul bar fixed to the bottom of the window. This bar is inside a container (main) to give it padding from either side of the window). It is designed to auto expand with the width of the window (liquidish) so there is no defined width beyond the initial width=device width.
When written by itself, I get a small auto indention on the left side of the ul. I've tried adding 0 padding and margins to the ul and li elements and that seems to have no effect as well as others. When I add in the container it seems to pad only the side with the indent problem. I'm sure its something simple and stupid, but I appreciate any help.
As an aside.. the width of the li elements being 33.3% is due to using a spacing box hack found on stackoverflow. The use of it doesn't change/help/hurt anything in this problem, so I omitted it to keep this a little more simple.
JSFiddle Link http://jsfiddle.net/XdHXf/1/
HTML
<div class="main">
<nav>
<ul>
<li>Main</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
</div>
CSS
.main{
width: 100%;
padding: 0 1em;
}
nav{
position: fixed;
bottom: 0px;
background: #455868;
width: 100%;
z-index: 1000;
}
nav ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
nav li{
position: relative;
float: left;
width: 33.3%;
text-align: center;
background: #455868;
padding: 0;
margin: 0;
}
nav li a{
text-decoration: none;
display: inline-block;
width: 100%;
padding: 15px 0;
}
This comes from the browser's builtin stylesheet. If you add
body {
margin: 0;
}
the small extra space goes away.
As an alternative, you get similar results, when you check Normalized CSS under Fiddle Options.