0

here is the html code and CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
  
  <title>Frontend Mentor | Space tourism website</title>
  <link rel="stylesheet" href="testing-css/testing.css">
</head>
<body>
  <div class="bg">
    <div class="main-menu">
      <div class="logo">
        <img class="logo-img" src="assets/shared/logo.svg" alt="logo-img">
      </div>
      <!-- <div class="line">
        <div class="horizontal-line"></div>
      </div> -->
    </div>
    </div>
</div>
</body>
</html>

body {
    margin: 0;
    padding: 0;
    background-image: url('../assets/home/background-home-desktop.jpg') ; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vh;
}

.main-menu {
    display: block;
    margin: 50px;
    padding: 25px 0 25px 0;
    width: 2000px;
    height: 50px;
    font-size: 0;
}

.logo {
    width: 50px;
    height: 50px;
    display: inline-block;
    
}

.logo-img {
    width: 50%;
    height: 50%;
}

.line {
    width: 600px;
    height: 50px;
    display: inline-block;
    padding-left: 50px;
    padding-right: 50px;
}
.horizontal-line {
    width: 600px;
    height: 2px;
    display: block;
    background-color:#979797;
    position: relative;
    bottom: -50%;
}

the result shows: when there is no second inline-block element

when remove the comment remarks, the html code is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
  
  <title>Frontend Mentor | Space tourism website</title>
  <link rel="stylesheet" href="testing-css/testing.css">
</head>
<body>
  <div class="bg">
    <div class="main-menu">
      <div class="logo">
        <img class="logo-img" src="assets/shared/logo.svg" alt="logo-img">
      </div>
      <div class="line">
        <div class="horizontal-line"></div>
      </div>
    </div>
    </div>
</div>
</body>
</html>

CSS code is the same as before, no changes.

the results shows :

when there has second inline-block element the first inline-block element were pushed down... what is the reason for this happening??

So , what is reason that affects the first inline-block element's position??

dewey
  • 1
  • 1

0 Answers0