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.
I have a whitespace on top of my website that i want to remove and dont know how:
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevDoWeb.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="styleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="header">
<h3 class="headerText">Test</h3>
</div>
</body>
</html>
The dev tools tell me that it cant be maring, padding, or border.... i am really clueless on what to do here, any help is appreciated.
In this case the white space is caused by the margin added from the browser stylesheet to h3. If you remove that by giving h3 a margin of 0, you get rid of the white space.
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}
h3 {
margin-top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevDoWeb.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="styleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="header">
<h3 class="headerText">Test</h3>
</div>
</body>
</html>
Try This:
h3 {
margin: 0;
}
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}
h3 {
margin: 0;
}
<div class="header">
<h3 class="headerText">Test</h3>
</div>
In your CSS, make these changes
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
border: 0;
top: 0;
}
You need to remove margin-top from the headerText
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}
.headerText {
margin-top: 0;
}
<div class="header"><h3 class="headerText">Test</h3>
Add this on top of your css file.
* {
margin: 0;
padding: 0;
}
I would strongly recommend using a reset style sheet, one like Eric Meyers. This link also explains what they are and why you should use them.
Related
I am relatively new to this. I am in school and need to complete an assignment for my html5/CSS class. I am having trouble making the blue color take up the top part. I do not want to have white space on the top.
Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<style>
body{
margin: 0;
padding: 0;
background-color:#FDFAF7;
font-family: Verdana,Arial,sans-serif;
}
header{
margin: 0;
padding: 0;
background-color: #2972C6;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<nav>
</nav>
<main>
<div>
</div>
</main>
<footer>
</footer>
</body>
</html>
It happened because of h1 having a margin.
You can either set its margin to 0 or set all the element's margin and padding to 0.
header h1 {
margin: 0;
}
or
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
try this:
<style>
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
background-color:#FDFAF7;
font-family: Verdana,Arial,sans-serif;
}
header{
margin: 0;
padding: 0;
background-color: #2972C6;
width: 100%;
height: 500px;
}
</style>
or
<style>
h1 {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
background-color:#FDFAF7;
font-family: Verdana,Arial,sans-serif;
}
header{
margin: 0;
padding: 0;
background-color: #2972C6;
width: 100%;
height: 500px;
}
</style>
I am working on a school project, and i need to place 4 buttons in the 4 quadrants of the screen. However, the first button has a little gap between it and the top of the screen as well as the side.
Code:
game.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Game</title>
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<div id="container">
<button class="button">A</button>
<button class="button">B</button>
<button class="button">C</button>
<button class="button">D</button>
</div>
</body>
</html>
game.css
body {
background-color: black;
overflow: hidden;
position: fixed;
}
h1, h2 {
color: white;
font-family: Ubuntu Mono;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
}
.button {
border: none;
color: white;
width: 50%;
height: 50vh;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Ubuntu Mono;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: fixed;
}
.button: nth-child(1) {
background-color: #bf0000;
top: 0;
left: 0;
}
.button:nth-child(2) {
background-color: #001fbf;
top: 0;
right: 0;
}
.button:nth-child(3) {
background-color: #e6c52d;
bottom: 0;
left: 0;
}
.button:nth-child(4) {
background-color: #1fbf1f;
bottom: 0;
right: 0;
}
However, i get the output shown here:
How can I remove the gap at the first button?
(and if you want, help me with the color :D)
Any help is appreciated! :D
It's a typo within CSS.
.button:nth-child(1) {
background-color: #bf0000;
top: 0;
left: 0;
}
Remove the space after .button:
So I made a a calculator to change kilogram to pound and I was going to add a border to a pelement but the bordergoes all the way to the right
So here is the html
<!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">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
<script src="main.js"></script>
</body>
</html>
And here is the css
*{
padding: 0%;
margin: 0%;
box-sizing: inherit;
}
body {
font-size: 15pt;
width: 480px;
height: 500px;
box-sizing: border-box;
}
#kilograms {
position: relative;
top: 70px;
left: 140px;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
top: 100px;
left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
position: relative;
top: 150px;
left: 240px;
border-radius: 4px;
}
Add width: min-content; to your .dinnars class. I would also delete the top and bottom attributes. They are unnecessarily restricting your sizing.
Also, get rid of the top left attributes.
*{
padding: 0;
margin: 0;
box-sizing: inherit;
box-sizing: border-box;
}
body {
font-size: 15pt;
// width: 480px;
// height: 500px;
}
#kilograms {
position: relative;
// top: 70px;
// left: 140p;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
// top: 100px;
// left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
width: min-content;
position: relative;
// top: 150px;
// left: 240px;
border-radius: 4px;
}
.box{
border:2px dotted green;
width: 500px;
height 500px;
}
<div class='box'>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
</div>
The p-element is in relative position with the element that has a class .dinners at right, so applying border on the p-element will make the right hand border look bigger because of the of relative element that already has it's own border that look like it's merging with the one at the Left because of there is no space between the two. Also note that the box-sizing property affects the way properties are applied on elements. Maybe try using box-sizing: border-box.
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
I need to make my logo and a text box in one line. The logo must be on the left and text box in the middle.
My CSS is:
#charset "utf-8";
body {
background: url("../paveikslai/fonas.jpg") no-repeat top center;
margin: 0;
}
.linija {
background:url("../paveikslai/v_linija.png") repeat-x;
height: 150px;
padding: 10px;
margin: 0;
}
.logotipas {
float: left;
display: inline;
margin: 0 15px;
}
.deze_tekstui {
margin: 0 50%;
}
And HTML is:
<!doctype html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='/stilius/stilius.css'>
<meta charset='utf-8'>
<link rel="icon" type="image/png" href="../paveikslai/favicon.ico">
<title>Minduvos Statyba</title>
</head>
<body>
<div class="linija">
<div class="deze_tekstui">
<img src="../paveikslai/deze_tekstui.png">
</div>
<div class="logotipas">
<img src='../paveikslai/minduva.png' height='120px' width='234px' alt="Minduvos Statyba">
</div>
</div>
</body>
</html>
If you want the logo to appear in a fixed position (top-left), you can't set it to inline.
.logotipas {
margin: 15px;
position: absolute;
top: 0;
}
I recommend Firefox with Firebug, which makes on-the-fly experimentation very easy.
You can use absolute position for the logo and margin auto for the text box, but you will have to define the width for it to work.
body {
background: url("../paveikslai/fonas.jpg") no-repeat top center;
margin: 0;
position: relative;
}
.linija {
background:url("../paveikslai/v_linija.png") repeat-x;
height: 150px;
padding: 10px;
margin: 0;
}
.logotipas {
display:block;
margin: 0 15px;
position: absolute;
top: 10px;
left: 10px;
}
.deze_tekstui {
margin: 0 auto;
width: 500px;
}