Позиционирование css

Question

Просьба обьяснить кто знает, я новичок в css. Почему класс card-title позиционируется относительно верхнего section, а не родителя section class card? И как конкретно в этом случае с этим бороться, спасибо.

body {
  font-family: Arial, Tahoma, sans-serif;
  font-size: 15px;
  padding: 0px;
  margin: 0px;
}

div,
p,
input,
button,
form {
  box-sizing: border-box;
}

.clearfix:after {
  content: '';
  display: table;
  width: 100%;
}

#header {
  background: #22a2ec;
  color: #fff;
  padding: 30px 45px;
}

.menu-item a {
  color: #fff;
  font-weight: bold;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  float: left;
  margin-right: 127px;
}

.main-menu {
  padding: 0px;
  margin: 0px;
  /*Обнуление отступов у li*/
}

.menu-item {
  float: left;
  margin-right: 27px;
  display: block;
  /*- убираем точки у li */
}

.phone {
  font-weight: bold;
  font-size: 18px;
  float: right;
}

.card {
  background: #184c6b;
  border-radius: 10px;
  color: #fff;
  width: 770px;
  height: 300px;
  margin-left: 60px;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.card-title {
  font-size: 21px;
  font-weight: bold;
  padding: 25px 0px 0px 45px;
}

.text-card {
  width: 310px;
  height: 175px;
  line-height: 1.35em;
  margin-left: 40px;
  float: left;
}

img {
  margin-top: 5px;
  margin-right: 45px;
  max-height: 135px;
  max-width: 310px;
}

.right {
  margin-left: 60px;
  float: right;
  height: 175px;
}

.pp {
  margin-top: 0px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Домашнее задание</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <section id="header" class="clearfix">
    <div class="logo">
      Моя первая верстка
    </div>
    <nav>
      <ul class="main-menu">
        <li class="menu-item">
          <a href="#">
                        Название пункта
                    </a>
        </li>
        <li class="menu-item">
          <a href="#">
                        Название пункта
                    </a>
        </li>
        <li class="menu-item">
          <a href="#">
                        Название пункта
                    </a>
        </li>
      </ul>
    </nav>
    <div class="phone">
      +7 (495) 982-53-64
    </div>
  </section>




  <section class="card">
    <h3 class="card-title">
      Заголовок карточки
    </h3>
    <div class="centr" class="clearfix">
      <div class="text-card">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      </div>
      <div class="right">
        <img src="img/image.png" alt="img">
        <p class="pp">
          Laboris nisi ut aliquip ex ea commodo
        </p>
      </div>
    </div>
  </section>
</body>

</html>

Answer 1

Надо посмотреть что у section и h3 за display свойства

сделайте для них:

display: inline-block;

и

.card {
  background: #184c6b;
  border-radius: 10px;
  color: #fff;
  width: 770px;
  height: 300px;
  margin-left: 60px;
  vertical-align: middle;
  margin-top: 25px; # изменение тут
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.card-title {
  font-size: 21px;
  font-weight: bold;
  padding: 0px 0px 0px 45px;  # изменение тут
}

и все у вас будет как надо

БЛОГ НА HUSL

Позиционирование css

Ответы (1 шт):