CSS klausimas dėl margin.

Turiu tokį div:

<div id="tooplate_middle">

		<h1>BE ACTIVE<span>with the best coffee</span></h1>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut lorem id mauris cursus pellentesque. Donec lobortis magna at orci blandit ac lobortis ipsum vestibulum.</p>

		<a href="#"><span>+</span> More</a>

	</div>

CSS:

#tooplate_middle {
width: 900px;
height: 220px;
padding: 30px 45px;
margin: 0 auto;
color: #c5dcea;
font-size: 20px;
}

#tooplate_middle h1 {
font-weight: normal;
font-family: sans-serif;
font-size: 50px;
color: white;
padding-top: 30px;
letter-spacing: 3px;
text-shadow: 1px 1px 1px #555;
}

#tooplate_middle h1 span {
margin-left: 30px;
font-size: 30px;
color: orange;
}

#tooplate_middle p {
margin-top: 10px;
font-family: sans-serif;
font-size: 20px;
}

#tooplate_middle a {
text-decoration: none;
color: white;
font-family: sans-serif;
font-weight: bold;
}

#tooplate_middle a span {
color: orange;
}

Tarkime noriu, kad <a> būtų per 20px žemiau nuo <p>, bandžiau ties tooplate_middle_a įvesti margin-top: 20px; , bet jokio efekto nedavė. Tada pabandžiau tooplate_middle_p įvesti margin-bottom: 20px ir suveikė - nuoroda pasislinko 20px į apačią. Noriu paklausti, kodėl veikė tik antras būdas, nors man jie atrodo vienodi.

"<p>" kadangi esas teksto "tag" automatiskai gauna margin-bottom tam tikra skaiciu sugeneruota narsykles. Tad resetinus margin-bottom ant <p> i margin-bottom:0px; ir dedant ant <A> MARGIN viskas veiks intuitiviai. Sitokiems dalykams labai padeda reset.css. Ivesk reset.css i "Google" ir rasi atitinkamus failus.

Gilinantis i problema:

Margin atitraukia nuo elemento be jo margin. PVZ: <p> sukuria aplink save dezute tam tikro dydzio o papildomi margin atitraukia ta dezute nuo kitu elementu. Tavo atveju kai dejai ant <a> margin-top:20px tau reikejo deti didesni skaiciu (25px ar daugiau) ir butu veikia kadangi <p> jau turi tam tikra skaiciu margin-bottom (apie 20px).

Jeigu nori isitikint su savo debug (firebug ar google chrome inspectorium) uzdek pelyte ant p tago kur dom view(visas html matosi) ir pamatysi zemiau geltona ar raudona elemento pratesima ( tai margin ).

Sekmes :)

Turiu tokį div:

<div id="tooplate_middle">

		<h1>BE ACTIVE<span>with the best coffee</span></h1>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut lorem id mauris cursus pellentesque. Donec lobortis magna at orci blandit ac lobortis ipsum vestibulum.</p>

		<a href="#"><span>+</span> More</a>

	</div>

 

CSS:

#tooplate_middle {
width: 900px;
height: 220px;
padding: 30px 45px;
margin: 0 auto;
color: #c5dcea;
font-size: 20px;
}

#tooplate_middle h1 {
font-weight: normal;
font-family: sans-serif;
font-size: 50px;
color: white;
padding-top: 30px;
letter-spacing: 3px;
text-shadow: 1px 1px 1px #555;
}

#tooplate_middle h1 span {
margin-left: 30px;
font-size: 30px;
color: orange;
}

#tooplate_middle p {
margin-top: 10px;
font-family: sans-serif;
font-size: 20px;
}

#tooplate_middle a {
text-decoration: none;
color: white;
font-family: sans-serif;
font-weight: bold;
}

#tooplate_middle a span {
color: orange;
}

 

Tarkime noriu, kad <a> būtų per 20px žemiau nuo <p>, bandžiau ties tooplate_middle_a įvesti margin-top: 20px; , bet jokio efekto nedavė. Tada pabandžiau tooplate_middle_p įvesti margin-bottom: 20px ir suveikė - nuoroda pasislinko 20px į apačią. Noriu paklausti, kodėl veikė tik antras būdas, nors man jie atrodo vienodi.

Aišku.

Minėjai: <p> sukuria aplink save dezute tam tikro dydzio

Ar yra koks standartas norint sužinoti konkretų dydį ar čia priklauso nuo naršyklės ir pan?

Dezutes aukstis tiesiogiai proporcingas font-size; Ir dezutes ilgis priklauso nuo display. Default <p> display:block; tai 100% auksciau herakijos esancio containerio (dazniausiai div). O margin priklauso nuo narsykles. Del to patariu naudoti reset.css ar panasiai, kad tiesiog viska liaudiskai sakant "nunulintu". PVZ: H1-H6 turi margin-top ir margin-bottom ir gana didelius tai reset.css nunulina ir viskas vyksta intuitiviai. O siaip naudok debug.

Man asmeniskai geriausiai Google Chrome. Paspausk kita peles mygtuka ant norimo elemento ir pasirink "Inspect ...." ir pamatyti debug visa. :)

Aišku.

 

Minėjai: <p> sukuria aplink save dezute tam tikro dydzio

 

Ar yra koks standartas norint sužinoti konkretų dydį ar čia priklauso nuo naršyklės ir pan?

"<p>" kadangi esas teksto "tag" automatiskai gauna margin-bottom tam tikra skaiciu sugeneruota narsykles. Tad resetinus margin-bottom ant <p> i margin-bottom:0px; ir dedant ant <A> MARGIN viskas veiks intuitiviai. Sitokiems dalykams labai padeda reset.css. Ivesk reset.css i "Google" ir rasi atitinkamus failus.

 

Gilinantis i problema:

Margin atitraukia nuo elemento be jo margin. PVZ: <p> sukuria aplink save dezute tam tikro dydzio o papildomi margin atitraukia ta dezute nuo kitu elementu. Tavo atveju kai dejai ant <a> margin-top:20px tau reikejo deti didesni skaiciu (25px ar daugiau) ir butu veikia kadangi <p> jau turi tam tikra skaiciu margin-bottom (apie 20px).

 

 

Jeigu nori isitikint su savo debug (firebug ar google chrome inspectorium) uzdek pelyte ant p tago kur dom view(visas html matosi) ir pamatysi zemiau geltona ar raudona elemento pratesima ( tai margin ).

 

Sekmes :)

siūlau neklaidinti žmonių, jei pats nežinai.

Margin atitraukia nuo elemento be jo margin. PVZ: <p> sukuria aplink save dezute tam tikro dydzio o papildomi margin atitraukia ta dezute nuo kitu elementu. Tavo atveju kai dejai ant <a> margin-top:20px tau reikejo deti didesni skaiciu (25px ar daugiau) ir butu veikia kadangi <p> jau turi tam tikra skaiciu margin-bottom (apie 20px).

Taip, jei nenaudojant reseto jokio, p po defaultu turi marginą. BET. Ir tu manai, kad a marginas collapsina su p marginu todėl ir neveikia? Vat paimk, pamėgink uždėti tą savo minimą didesnį margin anchorui - tarkim 50px, 100px ar 1000px - ar veiks? Neveiks. Ir čia nieko bendro nėra su kažkokiais naršyklės CSS defaultais :)

Jei neklystu, tai dėl to, kad <a> pagal default turi display: inline;

Kaip jis veikia plačiau galima pasiskaityti: http://www.w3.org/TR/CSS21/visuren.html#inline-formatting

siūlau neklaidinti žmonių, jei pats nežinai.

 

 

 

Taip, jei nenaudojant reseto jokio, p po defaultu turi marginą. BET. Ir tu manai, kad a marginas collapsina su p marginu todėl ir neveikia? Vat paimk, pamėgink uždėti tą savo minimą didesnį margin anchorui - tarkim 50px, 100px ar 1000px - ar veiks? Neveiks. Ir čia nieko bendro nėra su kažkokiais naršyklės CSS defaultais :)

Tiesiog issiskaityk ka sakau. Ir isidek i jsfiddle ir suprasi :) As kalbu apie jo varianta..

Ir ne marginai collapsina.. Marginai isvis skaiciuojami nuo block elementu. <a> yra inline default.. Tai pats labai klaidini zmogu :). Tiesiog bandau paaiskint zmogui paprastais zodziais. Gi esme ne pasirodyt kuo protingesniu ,o padet. :)

https://jsfiddle.net/nwzkadkp/

Jei kyla problemos su linkais dažnai padeda display block, tik turėk omeny, kad padarius a block level elementu jis automatiškau užims 100% pločio, tad greičiausiai reikės ir width taisyklės.

Tiesiog issiskaityk ka sakau. Ir isidek i jsfiddle ir suprasi :) As kalbu apie jo varianta..

Ir ne marginai collapsina.. Marginai isvis skaiciuojami nuo block elementu. <a> yra inline default.. Tai pats labai klaidini zmogu :). Tiesiog bandau paaiskint zmogui paprastais zodziais. Gi esme ne pasirodyt kuo protingesniu ,o padet. :)

O tai ką tu čia parašei? Cituoju:

Tavo atveju kai dejai ant <a> margin-top:20px tau reikejo deti didesni skaiciu (25px ar daugiau) ir butu veikia kadangi <p> jau turi tam tikra skaiciu margin-bottom (apie 20px).

Jo atveju, marginą ant <a> jis galėjo nors ir 156264584896px dėti, jis vistiek neveiktų.