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

html css

@yudayuda

8 Kontribusi 4 Poin

Diperbarui 4 tahun yang lalu

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>

@soeleman

120 Kontribusi 147 Poin

Dipost 4 tahun yang lalu

Tanggapan

Terima Kasih, Anda sangat membantu

@yudayuda

Buku Ini Koding!

Kelas Premium! Belajar bikin website dari nol sekarang

Margin-top tidak berfungsi

Kelas Premium!
Belajar bikin website dari nol sekarang