Làm cách nào để giảm khoảng cách giữa hai thẻ bootstrap?

Tôi bắt đầu đọc rất nhiều bài viết về thiết kế và có một nguyên tắc thường xuyên quay lại. “Khoảng trắng” hoặc “Khoảng trắng”. Như đã nói trên Wikipedia

Nó là phần của một trang không được đánh dấu. lề, rãnh và khoảng cách giữa các cột, dòng loại, đồ họa, hình hoặc đối tượng được vẽ hoặc mô tả

Tôi là một người trực quan nên tôi đã nắm bắt được một số ví dụ về thiết kế tốt/xấu và tôi quyết định viết mã cho chúng. Có một số quy tắc chung, trước tiên tôi sẽ hiển thị kết quả bằng liên kết đến CodePen của họ và ở cuối bài viết này, tôi sẽ nêu bật một số mã mà tôi thấy thú vị khi mã hóa các thẻ này

Một vài quy tắc chung về khoảng cách

1) Đừng ngại sử dụng lề và phần đệm

Đôi khi nó chỉ để đọc hay hơn

Quy tắc chung về khoảng cách

MãBút. https. // codepen. io/AJulietteDev/bút/OJyvgXZ

Đôi khi nó là cần thiết để cho thẻ của bạn thở

hãy để thẻ của bạn thở

MãBút. https. // codepen. io/AJulietteDev/pen/Baorwrd

2) Đừng quên sử dụng chúng giữa các yếu tố của bạn

Đừng quên sử dụng chúng giữa các yếu tố của bạn

MãBút. https. // codepen. io/AJulietteDev/pen/Baorwrd

3) Không sử dụng quá nhiều tiền ký quỹ để giữ cho thẻ của bạn ngăn nắp

Bạn có nguy cơ có các yếu tố nổi dường như không thuộc về nhau

Không sử dụng quá nhiều ký quỹ

MãBút. https. // codepen. io/AJulietteDev/pen/QWjmmze

Một số điểm nổi bật trên mã

1) Nhà thiết kế và lập trình viên không gặp vấn đề giống nhau về khoảng cách

Đó không phải là bạn, đó là tôi

Khi mã hóa các ví dụ bên trái (xấu), tôi thực sự phải ghi đè biểu định kiểu tác nhân người dùng (kiểu bộ chọn “mặc định”) của h1, h2, h3, p… vì tất cả chúng đều có lề mặc định khiến tôi có quá nhiều khoảng trống. Tôi đã sử dụng thuộc tính CSS của margin và line-height để giải quyết vấn đề đó

html {
  line-height: 1.6;
}

h1, h2, h3, h4, h5 {
  line-height: 1.2;
}

.card-content h2 {
  margin: 0.4em;
}

.card-content h1 {
  margin: 0.1em;
}

Trên thực tế, đối với ví dụ cuối cùng, bên phải có quá nhiều khoảng trống, tôi thực sự chỉ để kiểu mặc định của các thành phần

Khi các nhà thiết kế gặp vấn đề “quá ít khoảng cách”, tôi thực sự đã gặp phải, với tư cách là một lập trình viên, quá nhiều

2) Đây có phải là một bức thư tình gửi cho flexblox không?

Tôi mới bắt đầu học về lưới và tôi chưa cảm thấy thoải mái với những thứ này, vì vậy đối với thiết kế của các thẻ, tôi tự nhiên đặt rất nhiều hộp linh hoạt vào đó. Tôi thấy thật tuyệt khi nhanh chóng thay đổi cách hiển thị để có khoảng cách giữa các thành phần của mình

Để cho bạn nếm thử, tôi sẽ giải thích các chi tiết khó hiểu ở cuối thẻ trong ví dụ thứ hai của tôi

giải thích các chi tiết nghiệt ngã

HTML tương ứng

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

Nó có một div chung, 

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

.card-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  align-content: space-around;
}

.card-form .card-form-group {
  margin-right: 2em;
}

.card-form button {
  margin-left: auto;
}

Trong khối khai báo cho 

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

.card-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  align-content: space-around;
}

.card-form .card-form-group {
  margin-right: 2em;
}

.card-form button {
  margin-left: auto;
}

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

Tôi cần một khoảng trống nhỏ giữa hai đầu vào đầu tiên nên tôi đã thêm

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

Sau đó, cuối cùng để có nút ở bên phải, tôi phải thêm

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

Nhưng bạn không cần flexbox mọi lúc. Đối với các phần tử "xếp chồng" như các thẻ sau của ví dụ thứ ba, tôi đã sử dụng 

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

thanh tra trình duyệt của bạn

Đã có lúc tôi nghi ngờ về việc sử dụng flexbox của mình đối với thiết kế của thẻ này

sử dụng flexbox

HTML diễn ra như thế này

<div class='card card-white'>
  <div class='card-content'>
    <img src='https://images.unsplash.com/photo-1550340499-a6c60fc8287c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80' alt='paris-landscape'>
    <div class=card-details>
      <h3>Paris</h3>
      <p>From £200</p>
      <div class="stars">
        <i class="fa fa-lg fa-star"></i>
        <i class="fa fa-lg fa-star"></i>
        <i class="fa fa-lg fa-star"></i>
        <i class="fa fa-lg fa-star"></i>
        <i class="fa fa-lg fa-star"></i>
      </div>
    </div>
  </div>
</div>

Có 

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

.card-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  align-content: space-around;
}

.card-form .card-form-group {
  margin-right: 2em;
}

.card-form button {
  margin-left: auto;
}

<div class="card-form">
 <div class="card-form-group">
   <label for="country">Country</label>
   <select id="country" name="country" class="custom-select">
     <option value="canada">Canada</option>
     <option value="australia">Australia</option>
     <option value="usa">USA</option>
   </select>
   </div>
   <div class="card-form-group">
     <label for="fname">Phone Number</label>
     <input type="text" id="fphonenumber" name="phonenumber" placeholder="+1(555) 555-5555">
   </div>
   <button type="submit">Next step</button>
 </div>
</div>

Sau đó, tôi nhớ đến đối tượng phương tiện mà tại sao Nicole Sullivan lại đặt ra trong bài viết này và thẻ này thực sự là một. Cô ấy viết nó bằng float

TL; DR trên flexbox. không đặt nó ở khắp mọi nơi

Đó là nó. Nếu bạn thích cách tôi trình bày chi tiết một số cách sử dụng flexbox của mình và bạn muốn giải thích các phần khác của mã, hãy cho tôi biết trong các nhận xét, tôi sẽ sẵn lòng thêm những phần này. . )

Làm cách nào để căn chỉnh thẻ trong Bootstrap?

Làm cách nào để đặt phần đệm trong Bootstrap?