Bir juft elementni qanday qilib stilize qilish kerak?

Menda shunday divlar to'plami bor

<div class="row header"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<!-- add spacing here by adding margin to the row above -->
<div class="row header"></div>
<div class="row"></div>
<div class="row"></div>

Belgilashni o'zgartira olmaganim uchun, boshqa kodlarga o'zgartirishlar kiritmasdan, .row va .row.header o'rtasida bo'sh joy qo'sha olamanmi deb o'ylayman. .row.header oldidan qo'yilgan har .row ga margin-bottom ni qo'shish kerak.

Bu qo'shimcha darslar va xaklalarni qo'shishdan tashqari, CSS bilan mumkinmi?

0
@TomaszRup barcha .row.header elementlari bunday chekkalarga muhtoj bo'lsa, unda margin-top kifoya qiladi. Foydalanuvchining, " .row va .row.header " orasidagi bo'sh joyni so'raydi.
qo'shib qo'ydi muallif Andrei V, manba
@TomaszRup barcha .row.header elementlari bunday chekkalarga muhtoj bo'lsa, unda margin-top kifoya qiladi. Foydalanuvchining, " .row va .row.header " orasidagi bo'sh joyni so'raydi.
qo'shib qo'ydi muallif Andrei V, manba
.row.header kodiga margin-top qo'sha olmaysizmi?
qo'shib qo'ydi muallif Tomasz Rup, manba
.row.header kodiga margin-top qo'sha olmaysizmi?
qo'shib qo'ydi muallif Tomasz Rup, manba

9 javoblar

Ushbu javobda ko'rsatilganidek, https://stackoverflow.com/a/1817801/2894798 oldingi qarindoshi tanlash usuli yo'q CSS-da, marshrutni yuqoriga qo'yish uchun tavsiya qilaman .row.header

.row + .row.header{
margin-top:20px;
}
1
qo'shib qo'ydi

Ushbu javobda ko'rsatilganidek, https://stackoverflow.com/a/1817801/2894798 oldingi qarindoshi tanlash usuli yo'q CSS-da, marshrutni yuqoriga qo'yish uchun tavsiya qilaman .row.header

.row + .row.header{
margin-top:20px;
}
1
qo'shib qo'ydi

Siz qo'shni qarindoshi tanlash dan foydalanishingiz mumkin:

.row + .row.header {
   margin-top: 20px;
}

Bu faqat .row elementlaridan keyin keladigan .row.header elementlariga yuqori chekka qo'shib qo'yadi va birinchi .row.header element ta'sirlanmagan.

1
qo'shib qo'ydi

Siz qo'shni qarindoshi tanlash dan foydalanishingiz mumkin:

.row + .row.header {
   margin-top: 20px;
}

Bu faqat .row elementlaridan keyin keladigan .row.header elementlariga yuqori chekka qo'shib qo'yadi va birinchi .row.header element ta'sirlanmagan.

1
qo'shib qo'ydi

<div> -ga satr va header sinflari bilan yuqori margin qo'shish osonroq

.row.header {
 margin-top: 5px;
}
0
qo'shib qo'ydi

<div> -ga satr va header sinflari bilan yuqori margin qo'shish osonroq

.row.header {
 margin-top: 5px;
}
0
qo'shib qo'ydi

You can also use :not() selector if .row.header is first child of it's parent. For more info.

.row.header:not(:first-child) { 
    margin-top: 10px;
}
0
qo'shib qo'ydi
If you want apply margin only where is the comment is written you can add CSS for that as follows

div.row:nth-of-type(4) {
   margin-bottom: 20px;
}

but if you want add margin to every 3'd div after .header, you need to apply CSS as follows

div.row:nth-of-type(4n) {
  margin-bottom: 20px;
}

Umid qilamanki, bu sizning talabingizni to'ldiradi.

0
qo'shib qo'ydi
If you want apply margin only where is the comment is written you can add CSS for that as follows

div.row:nth-of-type(4) {
   margin-bottom: 20px;
}

but if you want add margin to every 3'd div after .header, you need to apply CSS as follows

div.row:nth-of-type(4n) {
  margin-bottom: 20px;
}

Umid qilamanki, bu sizning talabingizni to'ldiradi.

0
qo'shib qo'ydi