Наложение текста заголовка при переносе

Пытаюсь создать свой первый веб-сайт с сеткой, и все идет хорошо, но по какой-то причине текст заголовка переполнен в меньшем браузере.

Я пробовал играть с отступами / полями разных элементов. попытался добавить высоту линии, удалить свойства гибкости, ничего не помогло.

Я хочу, чтобы в моей витрине h1 был правильный межстрочный интервал.

body {
  background: var(--primary);
  margin: 30px 50px;
  line-height: 1.6rem;
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1.2rem;
}

.main-nav ul {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  list-style: none;
}

.main-nav a {
  background: var(--dark);
  display: block;
  text-decoration: none;
  padding: 0.8rem;
  color: var(--primary);
  text-transform: uppercase;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.btn {
  color: var(--primary);
  background: var(--dark);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
  box-shadow: var(--shadow);
}

.main-nav a:hover {
  background: var(--primary);
  color: var(--dark);
}

.top-container {
  display: grid;
  grid-gap: 1.2rem;
  grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}

.showcase {
  grid-area: showcase;
  min-height: 400px;
  background: url("https://source.unsplash.com/random");
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  color: black;
  box-shadow: var(--shadow);
}

.showcase h1 {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.showcase p {
  font-size: 1.3rem;
  margin-top: 0;
}

.top-box {
  background: #545454;
  color: var(--primary);
  padding: 1.5rem;
  text-align: center;
  align-items: center;
  box-shadow: var(--shadow);
  justify-items: center;
}

.top-box .price {
  font-size: 1.4rem;
}

.top-box-a {
  grid-area: top-box-a;
}

.top-box-b {
  grid-area: top-box-b;
}

.boxes {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
  background: var(--dark);
  color: var(--primary);
  text-align: center;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow);
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
  <nav class="main-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Gallery</a></li>
    </ul>
  </nav>
  <section class="top-container">
    <header class="showcase">
      <h1>Victors Tree Service</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
      </p>
      <a href="#" class="btn">Read More</a>
    </header>
    <div class="top-box top-box-a">
      <h2>Routine Services</h2>
      <p class="price">Starting at $199</p>
      <p>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.
      </p>
    </div>
    <div class="top-box top-box-b">
      <h2>Tree Removal</h2>
      <p class="price">From $299 - $799</p>
      <p>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.
      </p>
    </div>
  </section>
  <section class="boxes">
    <div class="box">
      <i class="fas fa-tree fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-tools fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-users fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-clock fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  </section>
  <section class="info">
    <img src="https://source.unsplash.com/random">
    <div>
      <h2>Over 20 Years Experience</h2>
      <p>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>
  </section>
  <section class="portfolio">
    <img src="https://source.unsplash.com/random/200x200">
    <img src="https://source.unsplash.com/random/200x201">
    <img src="https://source.unsplash.com/random/200x202">
    <img src="https://source.unsplash.com/random/200x203">
    <img src="https://source.unsplash.com/random/200x204">
    <img src="https://source.unsplash.com/random/200x205">
    <img src="https://source.unsplash.com/random/200x206">
    <img src="https://source.unsplash.com/random/200x207">
    <img src="https://source.unsplash.com/random/200x208">
  </section>
  <footer>Victor's Tree Service &copy 2019</footer>
</div>
<!--Wrapper Ends -->

Adag89 03.01.2019 источник

Ответы (2)

arrow_upward
4
arrow_downward

Это не проблема сетки, гибкости или отступов / полей. Это line-height проблема.

В частности, проблема line-height: 1.6rem установлена в элементе body.

Свойство line-height устанавливает минимальную высоту строчных полей. , где существуют встроенные элементы, такие как текст.

Типичное значение по умолчанию в большинстве браузеров - 1,2 (MDN) обратите внимание на безразмерное значение; подробнее об этом позже.

Кроме того, свойство line-height наследуется (MDN), что означает, что элементы в структуре HTML принимают значение, которое вы установили выше.

Поскольку вы не определили значение line-height ниже элемента body, этот параметр применяется ко всему документу.

Итак, проблема:

Вы установили h1 на 4rem.

Но высота строки 1.6rem не может вместить такой размер.

(4 * 16px) > (1.6 * 16px)

Вот ваш макет в обычном режиме рабочего стола:

Обратите внимание на то, что заголовок уже выходит за пределы рамки строки.

Из-за такой короткой высоты строки текст перекрывается при переносе (как на экранах меньшего размера):

Решение, хотите верьте, хотите нет, состоит в том, чтобы просто удалить единицу длины из значения line-height.

Поэтому вместо line-height: 1.6rem используйте line-height: 1.6.

Возможно, вы даже захотите использовать значение по умолчанию 1.2 (в этом случае вы можете вообще опустить правило line-height).

Это работает по следующей причине:

Когда вы используете line-height: 1.6rem, высота строки рассчитывается на основе размера шрифта корневого элемента. В вашем случае это 16 пикселей (значение по умолчанию для браузера).

line box height: 1.6 * 16px = 25.6px

   h1 font size: 4.0 * 16px = 64.0px

Вот так h1 превосходит высоту линейного бокса.

Но с line-height: 1.6 высота строки рассчитывается на основе размера самого шрифта.

line box height: 1.6 * (4 * 16px) = 102.4px

   h1 font size: 4.0 * 16px = 64.0px

Вот так прямоугольник линии превышает высоту h1.

Вот почему имеет смысл использовать безразмерные значения в свойстве line-height.

Смотрите спецификацию для ссылок и более подробной информации:

10.8 Расчет высоты строки: свойства line-height и vertical-align

Michael Benjamin 04.01.2019

comment

Прекрасное спасибо, я в конце концов понял это, но ваше объяснение невероятно помогает понять, почему. - Adag89; 04.01.2019

comment

Чтобы быть более точным, высота строки, применяемая к контейнеру (здесь body), определяет минимальную высоту строки-поля, а высота строки, применяемая к текстовому элементу, определяет высоту. Но, как вы сказали, и из-за наследования оба могут быть объединены только с одним, но если мы изменим только высоту строки элементов и сохраним одно из тела, это также будет работать (stackoverflow.com/a/54342051/8620333) - Temani Afif; 18.02.2019

arrow_upward
0
arrow_downward

Используйте запрос media для оперативности, и он должен быть написан в конце css, чтобы свойства css, записанные в медиа-запросе, не переопределялись какими-либо другими свойствами css.

@media screen and (max-width: 600px) {
  .main-nav a {
    text-align: center;
    float: none;
  }
}

Вместо display:grid используйте display:block, чтобы он занимал все пространство, и используйте float:left, чтобы все элементы были расположены слева от контейнера.

body {
  background: var(--primary);
  margin: 30px 50px;
  line-height: 1.6rem;
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1.2rem;
}

.main-nav ul {
  display: block;
  padding: 0;
  list-style: none;
}

.main-nav a {
  background: var(--dark);
  display: block;
  text-decoration: none;
  margin: 0.8rem;
  /*use margin instead of padding so that it will be clickable only on the element*/
  color: var(--primary);
  text-transform: uppercase;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  text-align: center;
  float: left;
  border: 1px solid red;
  /*just to highlight the clickable el*/
}

.btn {
  color: var(--primary);
  background: var(--dark);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
  box-shadow: var(--shadow);
}

.main-nav a:hover {
  background: var(--primary);
  color: var(--dark);
}

.top-container {
  display: grid;
  grid-gap: 1.2rem;
  grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}

.showcase {
  grid-area: showcase;
  min-height: 400px;
  background: url("https://source.unsplash.com/random");
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  color: black;
  box-shadow: var(--shadow);
}

.showcase h1 {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.showcase p {
  font-size: 1.3rem;
  margin-top: 0;
}

.top-box {
  background: #545454;
  color: var(--primary);
  padding: 1.5rem;
  text-align: center;
  align-items: center;
  box-shadow: var(--shadow);
  justify-items: center;
}

.top-box .price {
  font-size: 1.4rem;
}

.top-box-a {
  grid-area: top-box-a;
}

.top-box-b {
  grid-area: top-box-b;
}

.boxes {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
  background: var(--dark);
  color: var(--primary);
  text-align: center;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow);
}

@media screen and (max-width: 600px) {
  .main-nav a {
    text-align: center;
    float: none;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Victors Tree Service</title>
  <link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\Experimental\styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384- 
    UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
  <!-- Wrapper Begins-->
  <div class="wrapper">
    <nav class="main-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Gallery</a></li>
      </ul>
    </nav>
    <section class="top-container">
      <header class="showcase">
        <h1>Victors Tree Service</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
        </p>
        <a href="#" class="btn">Read More</a>
      </header>
      <div class="top-box top-box-a">
        <h2>Routine Services</h2>
        <p class="price">Starting at $199</p>
        <p>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.
        </p>
      </div>
      <div class="top-box top-box-b">
        <h2>Tree Removal</h2>
        <p class="price">From $299 - $799</p>
        <p>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.
        </p>
      </div>
    </section>
    <section class="boxes">
      <div class="box">
        <i class="fas fa-tree fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-tools fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-users fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-clock fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </section>
    <section class="info">
      <img src="https://source.unsplash.com/random">
      <div>
        <h2>Over 20 Years Experience</h2>
        <p>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>
    </section>
    <section class="portfolio">
      <img src="https://source.unsplash.com/random/200x200">
      <img src="https://source.unsplash.com/random/200x201">
      <img src="https://source.unsplash.com/random/200x202">
      <img src="https://source.unsplash.com/random/200x203">
      <img src="https://source.unsplash.com/random/200x204">
      <img src="https://source.unsplash.com/random/200x205">
      <img src="https://source.unsplash.com/random/200x206">
      <img src="https://source.unsplash.com/random/200x207">
      <img src="https://source.unsplash.com/random/200x208">
    </section>
    <footer>Victor's Tree Service &copy 2019</footer>
  </div>
  <!--Wrapper Ends -->
</body>

</html>

Pawan Kumar 03.01.2019

Наложение текста заголовка при переносе

Ответы (2)

Вопросы по теме