الْفَرْقُ بَيْنَ عَنَاصِرِ Block وَ Inline وَتَأْثِيرُ خَصَائِصِ CSS عَلَيْهَا
عِنْدَ تَعَلُّمِ تَصْمِيمِ وَتَطْوِيرِ المَوَاقِعِ بِاسْتِخْدَامِ لُغَتَيْ
HTML وَ CSS، فَإِنَّ مِنْ أَهَمِّ
المَفَاهِيمِ الهَيْكَلِيَّةِ الَّتِي يَجِبُ اسْتِيعَابُهَا بِعُمْقٍ هِيَ
الْفَرْقُ بَيْنَ العَنَاصِرِ الكُتْلِيَّةِ
Block Elements وَالعَنَاصِرِ السَّطْرِيَّةِ
Inline Elements. هَذِهِ العَنَاصِرُ هِيَ حَجَرُ الأَسَاسِ
الَّذِي يَعْتَمِدُ عَلَيْهِ المُتَصَفِّحُ لِتَحْدِيدِ آلِيَّةِ رَسْمِ وَعَرْضِ
المَحْتَوَى (Layout System). كَمَا أَنَّ مَعْرِفَةَ كَيْفِيَّةِ تَأَثُّرِ
هَذِهِ الأَشْكَالِ بِخَصَائِصِ التَّبَاعُدِ مِثْلَ width وَ
height وَ margin وَ padding تَمْنَحُكَ
السَّيْطَرَةَ الكَامِلَةَ عَلَى تَصْمِيمِ صَفَحَاتِكَ بِاحْتِرَافِيَّةٍ
بَالِغَةٍ.
مَا هِيَ عَنَاصِرُ Block؟
تُعْنَى كَلِمَةُ Block "الكُتْلَةَ"، وَهِيَ عَنَاصِرُ مِحْوَرِيَّةٌ تَتَصَرَّفُ كَصَنَادِيقَ مُسْتَقِلَّةٍ عَمُودِيًّا. حَيْثُ تَقُومُ هَذِهِ العَنَاصِرُ بِحَجْزِ مِسَاحَةٍ أَفُقِيَّةٍ كَامِلَةٍ لِنَفْسِهَا. وَيُمْكِنُ تَلْخِيصُ خَصَائِصِهَا البِنْيَوِيَّةِ فِيمَا يَلِي:
- تَبْدَأُ حَتْمًا فِي سَطْرٍ جَدِيدٍ (تَكْسِرُ السَّطْرَ الَّذِي قَبْلَهَا).
- تَمْتَصُّ العَرْضَ الكَامِلَ المُتَاحَ لَهَا تِلْقَائِيًّا بِنِسْبَةِ 100% مِنْ عُنْصُرِهَا الأُمِّ، حَتَّى لَوْ كَانَ مَحْتَوَاهَا كَلِمَةً وَاحِدَةً.
- لَهَا القُدْرَةُ عَلَى اِحْتِوَاءِ عَنَاصِرَ كُتْلِيَّةٍ أُخْرَى أَوْ عَنَاصِرَ سَطْرِيَّةٍ دَاخِلَ بِنْيَتِهَا.
أَمْثِلَةٌ شَائِعَةٌ عَلَى عَنَاصِرِ Block:
-
<div>— الحَاوِيَةُ أَوِ القِسْمُ العَامُّ الَّذِي يُسْتَخْدَمُ لِتَقْسِيمِ الهَيْكَلِ. <p>— فَقَرَاتُ النُّصُوصِ.-
<h1>إِلَى<h6>— العَنَاوِينُ الرَّئِيسِيَّةُ وَالفَرْعِيَّةُ. -
<ul>وَ<ol>— حَاوِيَاتُ القَوَائِمِ المُرَتَّبَةِ وَغَيْرِ المُرَتَّبَةِ. <table>— الجَدَاوِلُ البَيَانِيَّةُ.
<!-- مِثَالٌ لِعَنَاصِرِ Block --> <p>هَذِهِ هِيَ الفَقَرَةُ الأُولَى.</p> <p>وَهَذِهِ هِيَ الفَقَرَةُ الثَّانِيَةُ.</p>
النَّتِيجَةُ البَصَرِيَّةُ: تَظْهَرُ كُلُّ فَقَرَةٍ فِي
سَطْرٍ مُنْفَصِلٍ تَمَامًا نَظَرًا لِأَنَّ وَسْمَ
<p> عُنْصُرٌ كُتْلِيٌّ بِطَبِيعَتِهِ.
مَا هِيَ عَنَاصِرُ Inline؟
تُعْنَى كَلِمَةُ Inline "فِي نَفْسِ السَّطْرِ"، وَهِيَ عَنَاصِرُ عَرْضِيَّةٌ تَنْسَابُ مَعَ تَدَفُّقِ الكَلِمَاتِ وَالنُّصُوصِ دُونَ أَنْ تَتَسَبَّبَ فِي إِنْشَاءِ سَطْرٍ جَدِيدٍ. وَتَتَمَيَّزُ بِالسِّمَاتِ التَّالِيَةِ:
- لَا تَبْدَأُ فِي سَطْرٍ جَدِيدٍ بَلْ تُكْمِلُ بِجِوَارِ العَنَاصِرِ المُجَاوِرَةِ.
- تَأْخُذُ مِنَ العَرْضِ الأُفُقِيِّ بِمِقْدَارِ حَجْمِ مَحْتَوَاهَا الدَّاخِلِيِّ فَقَطْ.
- تُسْتَخْدَمُ غَالِبًا لِتَنْسِيقِ جُزْءٍ مُحَدَّدٍ مِنَ الكَلِمَاتِ دَاخِلَ الفَقَرَاتِ الكُتْلِيَّةِ.
أَمْثِلَةٌ شَائِعَةٌ عَلَى عَنَاصِرِ Inline:
-
<span>— حَاوِيَةٌ سَطْرِيَّةٌ صَغِيرَةٌ لِتَنْسِيقِ جُزْءٍ مِنَ النَّصِّ. <a>— الرَّوَابِطُ التَّشَعُّبِيَّةُ.-
<strong>أَوْ<b>— جَعْلُ الخَطِّ غَمِيقًا. -
<em>أَوْ<i>— جَعْلُ الخَطِّ مَائِلًا. -
<img>— الصُّوَرُ (وَتُعْتَبَرُ عُنْصُرًا سَطْرِيًّا مُسْتَبْدَلًا).
<!-- مِثَالٌ لِعَنَاصِرِ Inline --> <span>الكَلِمَةُ الأُولَى</span> <span>الكَلِمَةُ الثَّانِيَةُ</span>
النَّتِيجَةُ البَصَرِيَّةُ: تَظْهَرُ الكَلِمَتَانِ مُتَجَاوِرَتَيْنِ عَلَى نَفْسِ السَّطْرِ الأُفُقِيِّ دُونَ أَيِّ اِنْفِصَالٍ بِنْيَوِيٍّ.
---تَأْثِيرُ خَصَائِصِ CSS عَلَى الـ Block وَ الـ Inline
تَكْمُنُ الأَهَمِّيَّةُ الحَقِيقِيَّةُ فِي مَعْرِفَةِ كَيْفِيَّةِ اِسْتِجَابَةِ كُلِّ نَوْعٍ لِخَصَائِصِ الأَبْعَادِ وَالهَوَامِشِ، حَيْثُ يَخْتَلِفُ السُّلُوكُ تَمَامًا بَيْنَهُمَا:
1- تَأْثِيرُ الخَصَائِصِ عَلَى عَنَاصِرِ Block
تَسْتَجِيبُ العَنَاصِرُ الكُتْلِيَّةُ لِجَمِيعِ خَصَائِصِ المِسَاحَاتِ بِشَكْلٍ طَبِيعِيٍّ وَكَامِلٍ. يُمْكِنُكَ تَحْدِيدُ عَرْضِهَا، ارْتِفَاعِهَا، وَهَوَامِشِهَا الخَارِجِيَّةِ وَالدَّاخِلِيَّةِ فِي الِاتِّجَاهَاتِ الأَرْبَعَةِ:
div {
width: 200px; /* تَعْمَلُ بِكفاءةٍ */
height: 100px; /* تَعْمَلُ بِكفاءةٍ */
margin: 20px; /* تُطَبَّقُ عَلَى كُلِّ الجِهَاتِ (الأَرْبَعَة) */
padding: 10px; /* تُطَبَّقُ عَلَى كُلِّ الجِهَاتِ (الأَرْبَعَة) */
}
2- تَأْثِيرُ الخَصَائِصِ عَلَى عَنَاصِرِ Inline
تَمْتَلِكُ العَنَاصِرُ السَّطْرِيَّةُ سُلُوكًا مُقَيَّدًا جِدًّا حِمَايَةً لِتَدَفُّقِ الأَسْطُرِ؛ حَيْثُ تَرْفَضُ هَذِهِ العَنَاصِرُ أَبْعَادَ الِارْتِفَاعِ وَالعَرْضِ مُبَاشِرَةً، كَمَا أَنَّ هَوَامِشَهَا العُلْوِيَّةَ وَالسُّفْلِيَّةَ لَا تُؤَثِّرُ عَلَى تَرْتِيبِ العَنَاصِرِ الأُخْرَى:
-
خَاصِّيَّتَا
widthوَheightلَيْسَ لَهُمَا أَيُّ تَأْثِيرٍ فِعْلِيٍّ (يَتَمَّ تَجَاهُلُهُمَا). -
الهَوَامِشُ الجَانِبِيَّةُ (
margin-leftوَmargin-right) وَالفَرَاغَاتُ الجَانِبِيَّةُ (padding-leftوَpadding-right) تَعْمَلُ بِوُضُوحٍ وَتَدْفَعُ النُّصُوصَ المُجَاوِرَةَ. -
الهَوَامِشُ العُلْوِيَّةُ وَالسُّفْلِيَّةُ (
margin-top/bottom) لَا تَعْمَلُ، بَيْنَمَا الـpaddingالعُلْوِيُّ وَالسُّفْلِيُّ قَدْ يَظْهَرُ بَصَرِيًّا لَكِنَّهُ يَتَدَاخَلُ مَعَ الأَسْطُرِ دُونَ أَنْ يَدْفَعَهَا لِلْأَعْلَى أَوْ الأَسْفَلِ.
span {
width: 200px; /* سَيَتِمُّ تَجَاهُلُ القِيمَةِ نِهَائِيًّا */
height: 100px; /* سَيَتِمُّ تَجَاهُلُ القِيمَةِ نِهَائِيًّا */
margin: 20px 10px; /* الجَانِبِيُّ (10px) يَعْمَلُ، العُلْوِيُّ وَالسُّفْلِيُّ (20px) لَا يَعْمَلُ */
padding: 10px 5px; /* الجَانِبِيُّ يَعْمَلُ، العُلْوِيُّ وَالسُّفْلِيُّ يَتَدَاخَلُ بَصَرِيًّا فَقَطْ */
}
3- الحَلُّ السِّحْرِيُّ: الخَاصِّيَّةُ الِمَحْوَرِيَّةُ Inline-block
إِذَا كُنْتَ فِي حَاجَةٍ إِلَى جَعْلِ العَنَاصِرِ تِصْطَفُّ بِجِوَارِ
بَعْضِهَا فِي نَفْسِ السَّطْرِ (سُلُوكُ Inline)، وَلَكِنَّكَ تُرِيدُ فِي
نَفْسِ الوَقْتِ التَّحَكُّمَ فِي الأَبْعَادِ وَالهَوَامِشِ الكَامِلَةِ
(سُلُوكُ Block)، فَعَلَيْكَ اِسْتِخْدَامُ قِيمَةِ العَرْضِ الهَجِينَةِ
inline-block عَبْرَ خَاصِّيَّةِ display:
span {
display: inline-block; /* تَحْوِيلُ العُنْصُرِ إِلَى كُتْلَةٍ سَطْرِيَّةٍ هَجِينَةٍ */
width: 200px; /* تَعْمَلُ الآنَ بِكَفَاءَةٍ جَسِيمَةٍ */
height: 100px; /* تَعْمَلُ الآنَ بِكَفَاءَةٍ جَسِيمَةٍ */
margin: 15px; /* تُطَبَّقُ وَتَدْفَعُ جَمِيعَ العَنَاصِرِ فِي الجِهَاتِ الأَرْبَعَةِ */
}
---
جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ بَيْنَ الـ Block وَ الـ Inline
لِتَلْخِيصِ الفُرُوقِ الجَوْهَرِيَّةِ بِشَكْلٍ مَسْحِيٍّ سَرِيعٍ، نَسْتَعْرِضُ الجَدْوَلَ التَّالِيَ:
| وَجْهُ المُقَارَنَةِ | عَنَاصِرُ Block (الكُتْلِيَّة) | عَنَاصِرُ Inline (السَّطْرِيَّة) |
|---|---|---|
| بِدَايَةُ السَّطْرِ | تَبْدَأُ حَتْمًا فِي سَطْرٍ جَدِيدٍ تِلْقَائِيًّا. | تُكْمِلُ اِنْسِيَابِيًّا فِي نَفْسِ السَّطْرِ الاِفْتِرَاضِيِّ. |
| المِسَاحَةُ الأُفُقِيَّةُ (العَرْض) | تَحْجُزُ العَرْضَ الكَامِلَ لِلْحَاوِيَةِ (100%). | تَتَقَلَّصُ لِتَكُونَ عَلَى قَدْ حَجْمِ المَحْتَوَى فَقَطْ. |
| تَأثِيرُ width وَ height | تَعْمَلُ بِشَكْلٍ طَبِيعِيٍّ وَدَقِيقٍ. | لَيْسَ لَهُمَا أَيُّ تَأْثِيرٍ بِنْيَوِيٍّ (يَتِمُّ تَجَاهُلُهُمَا). |
| تَأْثِيرُ الهَوَامِشِ (Margin / Padding) | تُطَبَّقُ بِمُرُونَةٍ عَلَى الِاتِّجَاهَاتِ الأَرْبَعَةِ. | تَعْمَلُ بِوُضُوحٍ فِي الجِهَاتِ الجَانِبِيَّةِ (يَمِين/يَسَار) فَقَطْ. |
| الغَرَضُ البِنْيَوِيُّ وَالِاسْتِخْدَامُ | بِنَاءُ الهَيْكَلِ الإِجْمَالِيِّ لِلْقَالِبِ وَالأَقْسَامِ. | تَنْسِيقُ الفَقَرَاتِ، الكَلِمَاتِ، وَالشَّارَاتِ الدَّاخِلِيَّةِ. |
الخُلَاصَةُ
فِي نِهَايَةِ المَطَافِ، نَجِدُ أَنَّ فَهْمَ طَبِيعَةِ عَنَاصِرِ
Block وَ Inline هُوَ المِفْتَاحُ
الأَسَاسِيُّ لِتَجَنُّبِ المَشَاكِلِ البَصَرِيَّةِ عِنْدَ تَنْسِيقِ صَفَحَاتِ
المَوَاقِعِ. فَالْأُولَى تُشَكِّلُ الهَيْكَلَ الخَارِجِيَّ وَصَنَادِيقَ
الحِفْظِ الكَبِيرَةِ، بَيْنَمَا الثَّانِيَةُ تُعَالِجُ التَّفَاصِيلَ
الدَّاخِلِيَّةَ وَالنُّصُوصَ. كَمَا أَنَّ اِسْتِعَانَتَكَ بِالتَّهْجِينِ
الذَّكِيِّ عَبْرَ display: inline-block يَمْنَحُكَ المُرُونَةَ
القُصْوَى لِصِنَاعَةِ وَاجِهَاتِ مُسْتَخْدِمٍ (UI) مَرِنَةٍ وَخَالِيَةٍ مِنَ
الأَخْطَاءِ الهَنْدَسِيَّةِ.