0

введите сюда описание изображения

body {
  margin: 0;
  background: url("../images/pattern.png");
  font-family: Tahoma;
  line-height: 1.5px;
  font-size: 18px;
}

.card {
  width: 400px;
  margin: 30px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 5px 10px;
  border-radius: 10px;
}

.card-photo {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
}

.card-title {
  font-size: 20px;
  text-align: center;
  color: #098e00;
}

.card-text {
  font-size: 15px;
}
<div class="card">
  <img class="card-photo" src="assec/images/man.jpg" alt="No name">
  <h1 class="card-title"> Сантехник </h1>
  <p>Текст выходитыфафыафышарфыаршфыхарфыхрахфырахфырахфырахфырахфыа</p>
</div>

2
  • 1
    Скопируйте кодом, чтобы мы смогли проверить и помочь.
    – entithat
    13 ноя 2020 в 14:09
  • Вставил код, спасибо за ранее 13 ноя 2020 в 14:13

1 ответ 1

2

Проблема была тут: line-height: 1.5px;. Вы указали 1.5px, а это очень мало, вот и еффект как-будто текст сам на себя наложился.

Возможно, Вы хотели указать line-height: 1.5, 1.5 означает размер 1.5 * размер текущего шрифта font-size

body {
  margin: 0;
  background: url("../images/pattern.png");
  font-family: Tahoma;
  font-size: 18px;
}

.card {
  width: 400px;
  margin: 30px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 5px 10px;
  border-radius: 10px;
  overflow-wrap: break-word;
}

.card-photo {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
}

.card-title {
  font-size: 20px;
  text-align: center;
  color: #098e00;
}

.card-text {
  font-size: 15px;
}
<div class="card">
  <img class="card-photo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/VAN_CAT.png/1200px-VAN_CAT.png" alt="No name">
  <h1 class="card-title"> Сантехник </h1>
  <p>Текст выходитыфафыафышарфыаршфыхарфыхрахфырахфырахфырахфырахфыа</p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.