fapchat
@fapchat

Как сделать так, чтобы паддинг не перекрывал текст?

5d0252e4df430972124660.png
Как сделать так, чтобы паддинг от ссылки переносился на следующую строку и не перекрывал текст?
body{margin: 0; padding: 0;}
header{
  background:#35424a;
  color:#ffffff;
  padding-top:15px;
  min-height:70px;
}
header nav{background: black;}
.upper{font-size: 32px;
padding-bottom: 20px;

text-transform: uppercase;
}
#right{
  padding-left: 40%;
}
.grid{display:grid;
      /* grid-template-columns:1fr 1fr 1fr;*/
      grid-template-columns:repeat(3, 1fr);
      grid-gap:1em;
      /* grid-auto-rows:100px; */
      grid-auto-rows: minmax(100px, auto);;
align-items: center;
	grid-gap: 1rem;
text-align: center;}
a{  color:#ffffff;
  text-decoration:none;
  padding: 10px;
  background: DarkOrange	;
  border-radius: 10px;

}
.coffee{color:Chocolate;
font-family: segoe script;
}
h1, h2{font-weight: 700;
font-family: fantasy;}

 a:hover{background: black;
}
#blackBack{background: SlateGray;}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Landingpage</title>
    <link rel="stylesheet" href="./css/master.css">
  </head>
  <body>
    <header>
      <div class="">
        <h1 class="upper" id="right"><a href="#">мы продаём воздух!</a></h1>
        </div>

        <nav class="grid">

<div >
  <h2><a href="#">О пользе воздуха для организма</a></h2>
  <p class="coffee">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div >
  <h2><a href="#">Почему воздух стоит брать именно у нас?</a></h2>
  <p class="coffee">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div >
  <h2><a href="#">Почему именно высокогорный воздух так хорош?</a></h2>
  <p class="coffee">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
      </nav>

    </header>

<footer class="grid" id="blackBack">
<div class="">
  sdfsdf
</div>
  <div class="">
    dsvdsv
  </div>
  <div class="">
    sdfds
  </div>
</footer>
<script src="./js/main.js"></script>
  </body>
</html>

Нельзя ли сделать так, чтобы ссылка и на 2 строке имела такой же паддинг, чтобы паддинг был округлён с обоих сторон?
  • Вопрос задан
  • 173 просмотра
Пригласить эксперта
Ответы на вопрос 2
KornevaViktoria
@KornevaViktoria
Frontend Developer
Код на codepen в студию!

Скорее всего стили не на те элементы заданы, задайте line-height для ссылки - это добавит расстояние между строками ссылки (добавит воздух так сказать). Уберите паддинг или добавьте его родителю, может нужно будет подкорректировать.
Ответ написан
Комментировать
@archelon
это не паддинг, а высота строки
свойство line-height
например
h2 {
line-height: 1.4em;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы