This question already has answers here:
Removing space at the top left and right of div
(9 answers)
Closed 7 years ago.
I have a div (as the 'headline' for a test-site), but i always get a small margin left and right, even with my width set to 100%.
CSS:
.humpty {
background-color: pink;
text-align: center;
font-family: "Helvetica Neue";
color: gray;
font-size: 30px;
font-weight: lighter;
width: 100%;*/
padding-top: 1px;
padding-bottom: 1px;
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
}
html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Test Site</title>
</head>
<body>
<div class="humpty">
Main Title for this Page entirely
</div>
add
body, html {
margin: 0;
padding: 0;
}
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
I want the Life's Good logo on the left side in the nav bar. If I put it in the class "btn" it also gets the animation and I can't place it on the left side. Can anybody help me please? Here's my Code with an example where I want the logo (marked in Yellow):
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: relative;
margin-top: px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
Yellow Area is where i want the Logo ("Life's Good")
You are missing a number next to px in margin-top of #main. You may also want a margin-left value.
If you want to exclude the animation from that specific element, put the animation in a :not() CSS selector to deselect #main.
.btn:before:not(#main)
Set position: absolute for the #main element. Since .nav-bar's position is set to relative, #main will be absolutely positioned in relation to its parent, which is .nav-bar.
Now just set the margin of #main to suit your requirement. I've set it to margin: 15px 0 15px 75px (margin: top right bottom left) for reference.
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: absolute;
margin: 15px 0 15px 75px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
White space at top of page
(12 answers)
Closed last year.
I'm currently making a test site, but constantly keep getting a white border on the top and right of the screen: Example. I've tried to use: position: fixed but that didn't work. Here is my code:
.Main-Header {
font-size: 60px;
font-family: Garamond, Serif;
color: #818181;
background-color: #111;
margin: 0px 0px 0px 120px;
padding-left: 20px;
padding-top: 0px;
border-top: 0px;
}
.sidenav {
height: 100%;
width: 130px;
position: fixed;
top: 0px;
left: 0px;
background-color: #111;
padding-top: 25px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 130px;
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.pic1 {
padding-left: 30px;
padding-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test 1</title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="Main-Header"><em>Test Site</em></h1>
<div class="sidenav">
<div class="pic1"><a class="active" href="test.html"><i class="fa fa-home"></i></a></div>
About
Services
Clients
Contact
</div>
<div class="main">
<br>
<p>index</p>
</div>
</body>
</html>
Add the following CSS rule :
body {
margin: 0;
}
See this answer for more details.
Add the basic CSS reset By adding -
* {
margin: 0px;
padding: 0px;
}
By default CSS adds a margin and padding of 16px by adding the above CSS it will remove the margins and paddings of 16px
I have seen this question many times but the answers never seem to work. I have a floating image next to my "h1" title and i can't remove the space between the items and the edge of the page.
I solved the problem for the left hand side by setting the body margin to 0 but the top still has this gap.
Descriptif image
#Logo
{
float: left;
border-right: solid;
border-bottom: solid;
}
#Title
{
font-size: 70px;
border-top: solid;
}
header
{
margin: 0;
}
body, html {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Site_Web_1.css">
<title></title>
</head>
<body>
<header>
<div id="Logo"><img src="images/Logo.png"></div>
<h1 id="Title">Evil Mouse Coding</h1>
</header>
</body>
</html>
Use margin-top: 0 in h1 css
#Title
{
font-size: 70px;
border-top: solid;
margin-top: 0;
}
This question already has answers here:
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 1 year ago.
I want for my h4,h1 and p elements to be more close to each other, but I don't understand how I should go about doing it even after a little research. Trying to make my first project look half decent
here is my HTML
body {
background-color: #88BDBC
}
main {
color: black;
opacity: 0.9;
margin-top: 200px;
text-align: left;
text-transform: uppercase;
font-family: 'Antonio', sans-serif;
}
h4 {
color: white;
border: 15px;
background-color: #2F4F4F;
display: inline;
}
h1 {
font-size: 80px;
}
p {
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>PORTFOLIO</title>
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./base.css">
</head>
<body>
<main>
<h4>beginner front-end developer</h4>
<h1>i'm x</h1>
<p>hello my name is x and this is my portfolio</p>
</main>
</body>
</html>
p,h4 and h1 has default margin-top and margin-bottom property. simply change it to whatever you want:
body {
background-color: #88BDBC
}
main {
color: black;
opacity: 0.9;
margin-top: 200px;
text-align: left;
text-transform: uppercase;
font-family: 'Antonio', sans-serif;
}
h4 {
color: white;
border: 15px;
background-color: #2F4F4F;
display: inline;
margin-top: 0;
margin-bottom: 0;
}
h1 {
font-size: 80px;
margin-top: 0;
margin-bottom: 0;
}
p {
font-size: 20px;
margin-top: 0;
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>PORTFOLIO</title>
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./base.css">
</head>
<body>
<main>
<h4>beginner front-end developer</h4>
<h1>i'm x</h1>
<p>hello my name is x and this is my portfolio</p>
</main>
</body>
</html>
You can see their default values here
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I want to remove the blank between MY WEB and With HTML, CSS, and Javascript.
I tried fixing paddding, margin, and width/height but nothing seemed to work.
How can I customize the size of the empty space?
.title {
font-family: 'Secular One', sans-serif;
font-size: 100px;
text-align: center;
margin-top: 150px;
color: white;
}
body {
background-color: #192a75;
}
.description {
color: white;
text-align: center;
padding-bottom: 50px'
}
.button {
font-family: 'Sen', sans-serif;
background-color: white;
font-size: 20px;
width: 150px;
height: 55px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Secular+One&family=Sen&display=swap" rel="stylesheet">
<title>My Web</title>
</head>
<body>
<div class="title">
<p>MY WEB</p>
</div>
<div class="content">
<div class="description">
With HTML, CSS, and Javascript
</div>
<div class="button">
CONTINUE
</div>
</div>
</body>
</html>
Acutally <p> tag inside class "title" is having some default margin. So you just need to add following code in CSS file
.title p{
margin: 0px;
}
Check out the following JSFiddle link https://jsfiddle.net/qzuca28w/