Отступы / поля появляются там, где их не должно быть в 3 колонках - PullRequest
Новая
       5

Отступы / поля появляются там, где их не должно быть в 3 колонках

0 голосов
/ 28 июня 2018

Я пытаюсь создать макет из 3 столбцов для дизайна веб-сайта, который содержит изображение в верхней части каждого столбца, за которым следует h3, а затем текст. Я сделал это в html, но когда я попадаю в CSS, откуда-то появляются отступы / отступы, даже когда я устанавливаю их оба на 0.

Также по какой-то причине столбцы не выровнены по вертикали?

HTML: 

<h3>Why You Should Choose Us For Financing Options.</h3>
<div class="card">
  <img src="Heart.png" alt="Heart">
  <h5>Lowest Industry Rates</h5>
  <p>We take pride in our rates being the lowest in the industry!</p>
</div>
<div class="card">
  <img src="Coin.png" alt="Coin">
  <h5>Our Funding Is Fast</h5>
  <p>After completing our form, you can expect to receive your funding within 48 hours!</p>
</div>
<div class="card">
  <img src="File.png" alt="File">
  <h5>We're Quick And Easy</h5>
  <p>The form is easy to understand and can be completed in minutes!</p>
</div>

CSS: 

header h3 {
  font-family: 'Montserrat Light', sans-serif;
  font-size: 25px;
  color: #FFF;
  margin-top: 60px;
}

.card {
  display: inline-block;
  width: 260px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  margin-top: 60px;
}

Изображение желаемого результата: https://i.gyazo.com/f4a2ef3a9680a1ee79eaafd889d368b7.png

Текущий результат: https://i.gyazo.com/fd2eafc6a980527a07811e409a9262bd.png

1 Ответ

0 голосов
/ 28 июня 2018

Как насчет попробовать это:

HTML: 

<h3>Why You Should Choose Us For Financing Options.</h3>
<div id="fc">
    <div class="card">
        <img src="Heart.png" alt="Heart">
        <h5>Lowest Industry Rates</h5>
        <p>We take pride in our rates being the lowest in the industry!</p>
    </div>
    <div class="card">
        <img src="Coin.png" alt="Coin">
        <h5>Our Funding Is Fast</h5>
        <p>After completing our form, you can expect to receive your funding within 48 hours!</p>
    </div>
    <div class="card">
        <img src="File.png" alt="File">
        <h5>We're Quick And Easy</h5>
        <p>The form is easy to understand and can be completed in minutes!</p>
    </div>
</div>

CSS: 

header h3 {
    font-family: 'Montserrat Light', sans-serif;
    font-size: 25px;
    color: #FFF;
    margin-top: 60px;
}

#fc {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.card {
    display: inline-block;
    min-width: 260px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    margin-top: 60px;
}
...