Как сделать так, чтобы паддинг от ссылки переносился на следующую строку и не перекрывал текст?
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 строке имела такой же паддинг, чтобы паддинг был округлён с обоих сторон?
Простой
Простой