This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
according to the code , i want to marge the inner div "smedia" down ,it's not working unless i'm giving the outer div "layout" a padding value , need an explanation for that
also i figured that this can be solved by giving the "inner div" inline-block value ONLY not even block value , i need an explanation for that also
h1,h2,h3,p,div,section,header,footer,section,article,nav,ul,html,body
{
margin: 0;
padding: 0;
}
li{list-style-position: inside;list-style-type: none;}
body{background-color:white}
*{box-sizing: border-box;}
a{text-decoration: none;}
.header-text{text-align:center;}
.layout{width: 60%;margin: auto; background-color: #4DC1E8;height:300px;padding-top: 0px;}
.smedia{width:200px;background-color: antiquewhite;margin-top: 90px;}
.logo{border-right-style: solid;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="p3css.css" >
</head>
<body>
<h1 class="header-text">Clean Profile Widget</h1>
<div class="layout">
<div class="smedia">
<span class="logo">FB</span>
<span class="logo">TWR</span>
</div>
</div>
</body>
</html>
when giving padding
h1,h2,h3,p,div,section,header,footer,section,article,nav,ul,html,body
{
margin: 0;
padding: 0;
}
li{list-style-position: inside;list-style-type: none;}
body{background-color:white}
*{box-sizing: border-box;}
a{text-decoration: none;}
.header-text{text-align:center;}
.layout{width: 60%;margin: auto; background-color: #4DC1E8;height:300px;padding-top: 1px;}
.smedia{width:200px;background-color: antiquewhite;margin-top: 90px;}
.logo{border-right-style: solid;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="p3css.css" >
</head>
<body>
<h1 class="header-text">Clean Profile Widget</h1>
<div class="layout">
<div class="smedia">
<span class="logo">FB</span>
<span class="logo">TWR</span>
</div>
</div>
</body>
</html>
thanks in advance.
The thing you miss is overflow: auto;. Adding it to parent container makes margin work just fine.
The problem you faced is called margin-collapsing and it's pretty widely known. You can read about it here or here.
You can read about use of overflow and how it affects elements here.
h1,
h2,
h3,
p,
div,
section,
header,
footer,
section,
article,
nav,
ul,
html,
body {
margin: 0;
padding: 0;
}
li {
list-style-position: inside;
list-style-type: none;
}
body {
background-color: white
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
.header-text {
text-align: center;
}
.layout {
overflow: auto;
width: 60%;
margin: auto;
background-color: #4DC1E8;
height: 300px;
padding-top: 0px;
}
.smedia {
width: 200px;
background-color: antiquewhite;
margin-top: 90px;
}
.logo {
border-right-style: solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="p3css.css">
</head>
<body>
<h1 class="header-text">Clean Profile Widget</h1>
<div class="layout">
<div class="smedia">
<span class="logo">FB</span>
<span class="logo">TWR</span>
</div>
</div>
</body>
</html>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
Why there is a space between two <hr> tags?
When I make the width of <hr> tags, it didn't work. I made it 49%, but there is still a space between the two <hr> tag. How do I remove the space from the <hr> tags?
Here is the HTML and CSS code:
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left">
<hr id="right">
</body>
</html>
You can use single hr with gradient background instead.
* {
margin: 0;
padding: 0;
}
body {
background-color: #181818;
color: white;
}
a {
text-decoration: none;
}
h1 {
text-align: center;
color: #3ea6ff;
}
.home {
font-size: 3em;
background-color: #202020;
}
#night {
color: #f34601;
}
#mare {
color: #3ea6ff;
}
hr {
display: inline-block;
background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%);
height: 2px;
width: 100%;
border: 0;
}
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr>
check the code. This is really a better answer (imo) occam's razor
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left"><hr id="right">
<h1> OR YOU CAN DO THIS</h1>
<hr id="left"><!--
--><hr id="right">
</body>
</html>
Float :
Using float:left; on both of the hr's seem to work.
Flex :
I don't recommend doing this though. What I'd do is wrap the 2 hr's into a div and add display: flex; on it. And in the children I'd add flex-grow:1;
If i'm not mistaking it should grow the 2 hr's to take all the space in the div evenly. It will also work better with the rest of the page rather than using float which can sometimes mess everything up (from my own experience).
<hr id="left">
<br>
<hr id="right">
You can put a br between the hr
a br means a break.
Check this link to see more
https://www.w3schools.com/tags/tag_br.asp
Pretty noob question I'm sure. I ran into this problem when attempting to change the background color in a more complex webpage, so I started from scratch and still can't figure it out. Here's the simplified page
My goal is to set the background color of the site, but doing so with body had no effect, even when I had it filled with content. So I tried setting the background color and instead ran into a whole new problem. The header is not at the top of the site, since there's an unwanted space above the body element itself. I've tried setting everything to margin 0 and padding 0 to no effect. Here is my code:
html {
background-color: green;
}
.body {
padding: 0;
margin: 0;
}
#logo {
font-size: 2rem;
border-right: 1px solid grey;
color: green;
}
header {
border-bottom: 1px solid grey;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="blah">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<p id="logo">Path</p>
</header>
<section class="hero">
</section>
<section class="content">
<p>hi</p>
</section>
</body>
</html>
have you tried "body" instead of ".body"?
Try :
#logo {
margin-top: 0px ;
}
body {
padding: 0px;
margin: 0px;
}
Try add This in your CSS:
html,body,header,section,p{
padding:0;
margin:0;
border:0;
}
it Works, No unwanted space.
here the fiddle :https://jsfiddle.net/osrrwrqn/
Use
html,body{
padding:0;
margin:0;
}
I am making a website for some work and I have successfully made the background for the headers and all. But the problem is, I want to join it to the top of my webpage but it refuses to do that. How do I prevent it? (Not a duplicate of where the answer was adding !Important to the code)
Here is my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<div class="header"></div>
</head>
</html>
CSS:
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Note: I want to keep position absolute as it allows me to set everything in percentage values which is very essential for me.
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
CSS
body {
margin:0;
}
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Yes for this you need to set the margin for body and also you can add same for html as 0.Then it will reduce unnecessary spaces. Like for example.
html{margin:0;}
body{margin:0}
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 7 years ago.
HTML noob here.
Given the following html and css files, can someone tell me why my header does not hug the left and top edge of the viewport?
In other words, why is there white space above the grey box, and to its left, even though margin and border are set to 0?
.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/site.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrap" >
<div id="headerbar">
<p>Header</p>
</div>
</div>
</body>
</html>
.css file:
p {
font-family:verdana;
font-style: bold;
font-weight: 300;
font-size: 3em;
}
#headerbar {
width:3000px;
margin:0px;
border:0px;
padding:30px;
background: grey;
font-size: 1em;
}
There is default margin: 8px on body. You can remove that using:
body {margin: 0;}
NOTE: You set border: 0; margin: 0; to div where these are defaults. You can remove them there.
Give the body a 0 margin.
body {margin: 0; padding: 0;}
In most browsers, the body has a default margin. Add this to your css file:
body {
margin: 0px;
}
I am playing around with webdesign, I always assumed that div's that are positioned relative, always are ordered in the way they are coded. But now I have a div that jumps above another although they are both relative.
A screenshot of the problem:
Here is the code of my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
<link rel="stylesheet" type="text/css" href="CSS/nav.css">
<meta name="description" content="Website template 1">
<meta name="keywords" content="template">
<meta name="author" content="">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="MainContainer">
<div id="HeaderContainer">
<div id="NavigatieContainer">
<ul id="nav">
<!-- LVL 1 -->
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
</div>
<div id="BodyContainer">
<p>test</p>
</div>
</div>
</body>
</html>
And here is the code of my layout css:
/*Basic tags*/
body {
background-color: #efebdf;
}
/*DIV ID's*/
div#MainContainer {
width: 60%;
margin-left:auto;
margin-right:auto;
}
div#HeaderContainer {
position: relative;
}
div#NavigatieContainer {
float: right;
}
div#BodyContainer {
position: relative;
background-color: brown;
}
and the code of my navigation css so far, although I don't think the problem is here:
a {
color:#333333;
}
#nav {
/*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
border-radius: 0.3em;
position: relative;
z-index: 5;
}
#nav li {
margin-right: 10px; /*spacing tussen de list items*/
float:left;/*zorgt voor naast elkaar te plaatsen*/
list-style:none;/*Haalt list bolletjes weg*/
position:relative;
border-radius: 0.3em;
background-color: #e2e0d3;
}
#nav a {
color:black;
display:block;
font-weight:bold;
margin:0;
padding:8px 20px;
text-decoration: none;
}
#Adrift almost got it right, but he mentioned the wrong div. The overflow property should be on the HeaderContainer.
div#HeaderContainer {
position: relative;
overflow: auto;
}
I've created a jsfiddle for you with the result. You might want to add it to any following questions as it allows us to easier detect the problem.
http://jsfiddle.net/7Kx9g/
A little more background informations; once an image floats it is no longer in the document and therefor does not reserve it's own height. A trick called clearfix can be used to prevent it, but it's an advanced way of using overflow: auto; or overflow: hidden;
Do you know how to use inline-block? IMO, it's much easier to organize things with display:inline-block; than to use floats, because float makes it ignore several CSS rules, and the larger your project becomes, the more troublesome this "rule-ignoring" has the POTENTIAL to become.
The problem is caused by the float. Put clear:both; in the css for div#BodyContainer.
Look here. http://jsfiddle.net/aKy67/
Total agree #HC_