picha

CSS - SOMO LA 9: Margin na Padding

Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.

Utangulizi

Katika CSS, mara nyingi tunahitaji kudhibiti nafasi — aidha kuacha nafasi kati ya elementi, au nafasi ya maandishi na mipaka ya boksi (element). Hapa ndipo margin na padding zinapofanya kazi. Ingawa zinaweza kuonekana kufanana, kila moja ina nafasi yake maalum katika layout ya ukurasa.

Kuelewa tofauti hizi ni muhimu kwa kupangilia vizuri vipengele vya tovuti.


 

✅ 1. Tofauti Kati ya Margin na Padding

Kipengele Maelezo
padding Nafasi kati ya maudhui (text/image) na ukingo wa element
margin Nafasi kati ya element moja na nyingine

Mfano wa picha ya kufikirika:
? = element


✅ 2. padding

Inatumika kuongeza nafasi ndani ya element (yaani kati ya content na border yake).

div {
  padding: 20px;
}

Viwango vya padding:

Short-hand:

padding: 10px 15px 20px 25px;
/* top right bottom left */

✅ 3. margin

Inatumika kuongeza nafasi nje ya element, yaani kati ya element hiyo na zingine.

div {
  margin: 30px;
}

Viwango vya margin:

Short-hand:

margin: 10px 15px 20px 25px;
/* top right bottom left *">
...

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

help_outlineZoezi la Maswali

info Jaza maswali yote au baadhi kisha bofya kitufe cha kutuma majibu hapo chini.
1 Margin hutumika kwa nini hasa?
2 Kwa kutumia padding: 10px 20px;, maana yake ni nini?
3 Padding inahusiana na nini?
4 Ikiwa unataka kuondoa nafasi zote nje ya boksi, utatumia?
5 Margin: auto; husaidia kufanya nini?

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 2025-06-23 Topic: CSS Main: ICT File: Download PDF Views 619

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Sira ya Mtume Muhammad (s.a.w)    👉2 Kitau cha Fiqh    👉3 Bongolite - Game zone - Play free game    👉4 Simulizi za Hadithi Audio    👉5 Kitabu cha Afya    👉6 web hosting   

Post zinazofanana:

CSS - SOMO LA 15: Float na Clear katika CSS

Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.

Soma Zaidi...
CSS - SOMO LA 17: Flexbox Advanced

Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.

Soma Zaidi...
Drone: Nyuki Dume na Majukumu Yake

Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.

Soma Zaidi...
CSS - SOMO LA 12: Width, Height, Max/Min Width na Overflow

Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.

Soma Zaidi...
CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition

Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.

Soma Zaidi...
CSS - SOMO LA 33: CSS Frameworks

Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.

Soma Zaidi...
CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)

Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.

Soma Zaidi...
CSS - SOMO LA 11: Mitindo ya Border (Border Styles)

Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.

Soma Zaidi...
CSS - somo la 3: syntax za css yaani sheria za uandishi wa css

Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css

Soma Zaidi...
CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

Soma Zaidi...