Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Margin-top tidak berfungsi
saya membuat html seperti ini
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- font -->
<link href="https://fonts.googleapis.com/css2?family=Viga&display=swap" rel="stylesheet">
<!-- My css -->
<link rel="stylesheet" href="style.css">
<title>Yuda Yuda</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container">
<a class="navbar-brand" href="#">Toko Murah</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">About</a>
<a class=" btn btn-primary tombol" href="#">Join Us</a>
</div>
</div>
</div>
</nav>
<!-- Akhir Navbar -->
<!-- Jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4 judul">Get work done faster and better with us</h1>
</div>
</div>
<!-- AKhir Jumbotron -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
dan css seperti ini
/* Navbar */
.ml-auto{
margin-left: auto;
}
.navbar-brand{
font-family: 'Viga', sans-serif;
font-size: 32px;
}
/* Jumbotron */
.jumbotron{
background-image: url(img/jumbotron-bg.jpg);
background-size: cover;
height: 640px;
}
h1, .judul{
color: white;
text-align: center;
margin-top: 150px;
}
/* Utility */
.tombol{
text-transform: uppercase;
border-radius: 40px;
}
/* DEKSTOP VERSION */
@media (min-width: 992px) {
.navbar-brand, .nav-link{
color: white !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
.nav-link{
text-transform: uppercase;
margin-right: 30px;
}
.nav-link:hover::after{
content: "";
display: block;
border-bottom: 3px solid #0b63dc;
width: 50%;
margin: auto;
padding-bottom: 5px;
margin-bottom: -8px;
}
.jumbotron{
margin-top: -75px !important;
}
}
setelah saya memberi margin top di h1 kenapa margin top di .jumbotron dan malah ikut turun ya?mohon pencerahanya
1 Jawaban:
Jawaban Terpilih
<div>daripada pakai margin, mungkin bisa pakai padding<br><br><figure data-trix-attachment="{"contentType":"image/png","filename":"sk_yudayuda__margin_top.png","filesize":30171,"height":364,"url":"https://i.ibb.co/12TkNrt/sk-yudayuda-margin-top.png","width":622}" data-trix-content-type="image/png" data-trix-attributes="{"caption":"menggunakan padding","presentation":"gallery"}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/12TkNrt/sk-yudayuda-margin-top.png" width="622" height="364"><figcaption class="attachment__caption attachment__caption--edited">menggunakan padding</figcaption></figure></div>
Tanggapan
Terima Kasih, Anda sangat membantu