0

I'm playing around with CSS and observed some behavior that I could not understand.

Below are my CSS and HTML snippets:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
}

header {
  display: flex;
  flex-direction: row;
  background-color: antiquewhite;
  width: 90%;
  margin: auto;
  align-items: center;
  height: 15vh;
}

.logo-container {
  display: flex;
  flex: 1;
  background-color: rgb(4, 142, 142);
}

.logo {
  font-weight: 400;
  margin: 20px;
}

img {
  /* margin:70px; */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./style.css" />
  <title>Landing Page</title>
</head>

<body>
  <header>
    <div class="logo-container">
      <img class="imageCont" src="./img/logo.svg" alt="logo">
      <h4 class="logo">Three Dots</h4>
    </div>
  </header>
</body>

</html>

Here are the observations that I am confused about,

  1. If I remove align-items: center; in <header>, then the image will scale to the entire height of the header. It seems adding align-items: center; will add a constraint to the height of the image. how does this exactly work?

  2. If I remove align-items: center; and uncomment margin:70px; then It seems that I can add a margin to the Image, although I have read that margins don't work for inline elements. Why am I seeing this behavior?

  3. While align-items: center; is present, and margin:70px; is removed from imgthe margin added to class logo will also get applied to the img. However if I remove the margin: 20px; from class logo and add margin:70px; to img then that margin will not get applied to text with the class logo why is this ?

Umendra Rajapakshe
  • 134
  • 1
  • 8
  • 1
    first duplicate will explain the margin part, second one the stretch default alignment. Next time try to ask only *ONE* question please. – Temani Afif May 15 '22 at 09:14

0 Answers0