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/
Related
As you can see in the CSS below, I have the height set to "50vh" which is causing the hover selector to be triggered underneath and over the text rather than just on the text. I have tried to lower the height but it moves the text upwards. Is there a way to stop it from triggering unless the cursor is over the actual text while still keeping the text lowered?
body {
background-color: #efefef;
overflow: hidden;
}
.logo h1 {
align-items: center;
color: #262626;
display: flex;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: 50vh;
justify-content: center;
max-width: 100px;
margin: auto;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
Give this a try. You should set the flex properties on the parent div only, and not the h1. This way, you can manipulate the height of the h1 and the width in which the :hover is activated.
body {
background-color: #efefef;
overflow: hidden;
}
.logo {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #262626;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: fit-content;
width: fit-content;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
</head>
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
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:
Setting a width and height on an A tag
(6 answers)
Closed 2 years ago.
I have a very simple HTML file with some styles given to it, but for some reason I can't change the width of the links inside of the div, I tried it with width, max-width, min width and with some different containers such as an unordered list, but no matter what, they stay the same size.
body {
width: 100%;
height: 100vh;
padding: 0px;
margin: 0px;
}
#navbar {
margin: 0px;
padding: 0px;
height: 10%;
text-align: center;
}
a:visited,
a:link {
color: #ffffff;
border: 2px solid black;
text-decoration: none;
}
a:hover {
color: #30cc00;
background-color: #003333;
<div id="navbar">
Home
Gedichte
Bücher
Aktuelles
Kontakt
</div>
the a tag is an inline element. change it to inline-block and set width. However, if you are just trying to get more space between the links you might want to consider using flexbox.
body {
width: 100%;
height: 100vh;
padding: 0px;
margin: 0px;
}
#navbar {
margin: 0px;
padding: 0px;
height: 10%;
text-align: center;
}
a{
display:inline-block;
width:100px;
}
a:visited, a:link {
color: #ffffff;
border: 2px solid black;
text-decoration: none;
}
a:hover{
color: #30cc00;
background-color: #003333;
}
<!DOCTYPE html>
<html lang="de" dir="ltr" style="background-color: #002050; color: #ffffff;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stihi</title>
<link rel="stylesheet" href="index.css">
<script defer src="index.js"></script>
</head>
<body>
<div id="navbar">
Home
Gedichte
Bücher
Aktuelles
Kontakt
</div>
</body>
</html>
You just need to add in your element Home
display: block;
or
display: inline-block;
source: Setting a width and height on an A tag
I'm trying to code a simple website with a navbar under the header. The problem is that the position of the navbar elements is directly influenced by the length of the header element, but only when the header element has a float:left css rule.
The two elements are in separate divs and don't share any css rules.
I've already tried using justify-content, align-items, margin: auto etc. It seems as if the only way to fix the issue is to remove the float:left rule from the header text, but I need to keep it.
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="style.css" />
<head runat="server">
<title>Lewis</title>
</head>
<body>
<form id="form1" runat="server">
<div id="header-bar">
<h1>Lewis' Website</h1>
<img src="images/headericon.jpg" />
</div>
<div id="navbar">
<nav>
Home
About
Posts
</nav>
</div>
</form>
</body>
</html>
css
#header-bar img {
width: 150px;
height: 150px;
border-radius: 50%;
padding-right: 10%;
padding-left: 10%;
}
#header-bar h1 {
font-family: Arial;
font-size: 70px;
color: white;
padding-left: 10%;
float: left;
}
#navbar {
background-color: white;
margin: 0px;
}
#navbar nav a {
font-size: 35px;
margin: 0 15px;
}
Here is your CSS now fix it as per your design requirement.
#form1 {
display: flex;
justify-content: space-between;
align-items: center;
}
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;
}