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
Related
This question already has an answer here:
How do i create and link another webpage with Visual Studio Code?
(1 answer)
Closed 2 years ago.
I'm talking specifically about the part that says <p>Questions? Ask them here</p>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 57%;
}
body, html {
margin: 0;
padding: 0:
}
header {
width: 100%;
height: 70px;
background-color: #00264d;
}
h1 {
position: absolute;
padding: 3px;
float: left;
margin-left: 2%;
margin-top: 10px;
font-family: Arial;
color: #ffffff;
}
ul {
width: auto;
float: right;
margin-top: 8px;
}
li {
display: inline-block;
padding: 15px 30px;
}
a {
text-align: center;
color: #ffffff;
text-decoration: none;
font-family: Arial;
font-size: 1.2vw;
}
a:hover {
color: #F0c330;
transition: 0.5s;
}
img {
width: 100;
margin-top: -16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="SitNumber360Styling.css">
<title>Sit Number</title>
<link rel="shortcut icon" href="SitNumberLogo.png">
</head>
<header>
<div class="wrap">
<h1>Sit Number</h1>
<nav>
<ul>
<li>Chairs</li>
<li>Cushions & Pillows</li>
<li>Accessories</li>
<li>Support</li>
</ul>
</nav>
</div>
</header>
<body>
<p>Questions? Ask them here</p>
<div>
<img src="transparentchair.png" alt="Product Picture" class="center">
</div>
</body>
</html>
You might try nesting the elements such as;
<p>Questions? Ask them here</p>
I have been studying CSS, however i came across a weird behavior, there is this anchor element that i gave a class with name "sponsor-link", it does not show up in Firefox nor in Chrome(completely removed from the DOM tree), however if i name it something else(i.e. sponsor-link-btn) then it shows up.
Can anyone explain why using "sponsor-link" as class name can remove an element?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Franklin Running Club</h1>
</header>
<div class="container">
<main class="main">
<h2>Come join us!</h2>
<p>
The Franklin Running club meets at 6:00pm every Thursday
at the town square. Runs are three to five miles, at your
own pace.
</p>
</main>
<aside class="sidebar">
<a href="/twitter" class="button-link">
follow us on Twitter
</a>
<a href="/facebook" class="button-link">
like us on Facebook
</a>
<a href="/sponsors" class="sponsor-link">
become a sponsor
</a>
</aside>
</div>
</body>
</html>
CSS
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: Helvetica, Arial, sans-serif;
}
header {
color: #fff;
background-color: #0072b0;
border-radius: .5em;
padding: 1em 1.5em;
}
main {
display: block;
}
.container {
display: flex;
}
.main {
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
width: calc(30% - 1.5em);
margin-left: 1.5em;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}
.button-link {
display: block;
padding: 0.5em;
color: #fff;
background-color: #0090C9;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.button-link + .button-link {
margin-top: 1.5em;
}
.sponsor-link {
display: block;
color: #0072b0;
font-weight: bold;
text-decoration: none;
}
I found out now.
My browsers have AdBlock Plus plugins,
which hide the element.
I think ABP black listed the text "sponsor-link"
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/
I'm making a very basic website, but can't remove the extra top space over the body element. It looks like this in both Chrome and Firefox:
I've tried most relevant solutions I found on this forum: I reset my body and HTML margin and padding to 0. Also, I made sure there are no children elements with top margins messing with my code.
body, html {
margin: 0px;
padding: 0px;
}
.navbar {
background:#312c2a;
height: 30px;
text-align:center;
}
.navbar li {
display: inline-block;
margin-right:20px;
margin-left:20px;
}
.navbar a {
color: white;
font-size:20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
This is my HTML code. I really can't find any problem. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/png" href="imgs/favicon.png"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
Many browsers give unordered lists a default top and bottom margin. You should add:
ul {
margin: 0;
padding: 0;
}
Demo Snippet:
body,
html,
ul {
margin: 0;
padding: 0;
}
.navbar {
background: #312c2a;
height: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
margin-right: 20px;
margin-left: 20px;
}
.navbar a {
color: white;
font-size: 20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="imgs/favicon.png" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
try this :)
.navbar {
width: 100%;
height: 70px;
background: black;
margin-left: auto;
margin-right: auto;
position: fixed; /*fixed, relative, or absolute like you want*/
top: 0px;
z-index: 200;
}
ul {
margin: 0;
padding: 0;
}
and
.body{
margin: 0;
padding: 0;
background-color:white;
}
Hi I would like to know how to set a position of h1 and p inside jumbotron. Lets say I would like to place my h1 in left corner of jumbotron and under h1 I would like to have p but with a little left-padding.
.jumbotron {
max-width: 100%;
padding-top: 80px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
position: relative;
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
padding-bottom: 80px;
}
.jumbotron p {
position: absolute;
display: block;
color: white;
font-size: 20px;
}
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
Hope this helps you!
.jumbotron {
max-width: 100%;
padding-top: 40px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
position: relative;
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
}
.jumbotron p {
position: absolute;
display: block;
color: white;
font-size: 20px;
padding-left:40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
You had some unnecessary positioning being set. There is absolutely no reason to give h1 the relative positioning, and absolute to p.
Honestly, judging by the way you were using it I'd say you should do a little bit of learning and experimentation to fully understand the mechanics.
.jumbotron {
max-width: 100%;
padding-top: 80px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
display: block;
font-weight: bold;
font-size: 30px;
color: white;
padding-left: 40px;
}
.jumbotron p {
display: block;
color: white;
font-size: 20px;
padding-left: 40px;
}
<div class="jumbotron">
<h1> Reserve your place </h1>
<p>..before somebody will overtake you</p>
</div>
I have done something like this and its working my text is getting aligned to center, left or right.
<div class="jumbotron text-center container">
<h1>This is demo</h1>
</div>
Hope it will help.