Margin i padding

Web dizajn i grafika
1

Za početak da kažem da CSS znam vrlo slabo.Znam raditi s Flex platformom i dosad sam koristio Flex style builder koji sam generira CSS i moram priznati da me output nije zanimao-copy/paste i idemo.

Sad sam se nešto uhvatio Asp.Net-a i naravno naišao na prve probleme vezane uz CSS.Nije mi jasno korištenje marginsa i paddinga,kod Flexa mi je sve bilo jasno-margin je udaljenost childa do parenta,padding je razlika između sadržaja childa i bordera.
Možda se nisam dobro izrazio,ali u glavi kužim što je to,e sad meni nije jasno zašto ne mogu običan paragraf koji se nalazi unutar diva pozicionirati ulijevo koristeči margin-right:10px;

Što ne bi to trebao margin-right značiti,udaljenost p taga od njegovog parenta,u ovom slučaju diva.Znači p se pozicionira 10px od desnog ruba diva.
Znam de je pitanje glupo i početnićko,ali ako može neko objašnjenje?

2

Ja sam isto dosta slab sa CSS-om i margine ne koristim nigdje. Sve rješavam paddingom.

Koliko sam pohvatao, paddingom diva rješavaš poziciju onoga što je unutar samog diva dok marginom diva rješavaš poziciju samog diva u odnosu na vanjske elemente.

3

samo se treba paziti IE box modela …

4

[quote=“suludi”]Za početak da kažem da CSS znam vrlo slabo.Znam raditi s Flex platformom i dosad sam koristio Flex style builder koji sam generira CSS i moram priznati da me output nije zanimao-copy/paste i idemo.

Sad sam se nešto uhvatio Asp.Net-a i naravno naišao na prve probleme vezane uz CSS.Nije mi jasno korištenje marginsa i paddinga,kod Flexa mi je sve bilo jasno-margin je udaljenost childa do parenta,padding je razlika između sadržaja childa i bordera.
Možda se nisam dobro izrazio,ali u glavi kužim što je to,e sad meni nije jasno zašto ne mogu običan paragraf koji se nalazi unutar diva pozicionirati ulijevo koristeči margin-right:10px;

Što ne bi to trebao margin-right značiti,udaljenost p taga od njegovog parenta,u ovom slučaju diva.Znači p se pozicionira 10px od desnog ruba diva.
Znam de je pitanje glupo i početnićko,ali ako može neko objašnjenje?[/quote]

da bi p odmaknuo od lijevog ruba parent elementa maroš koristiti margin-left: 10px, a ne margin-right. Margin-right bi ti pomogao da odmakneš p za 10 px od desnog ruba div elementa kada bi imao na p float svojstvo postavljeno na right.

5

Instaliraj Firebug ekstenziju za Firefox i sam pogledaj sta se desi kad napravis to sta radis. Malo eksperimentiraj i skuzit ces kako funkcionira box model.

6

@CreatifCode Skužio sam da sam krivo napisao,ali mi se nije dalo editirati.Nego ako može mala
pomoć,ja sam sad uspio pomaknuti p udesno uz float i margin,ali mi onda ispadne iz diva.
Layout je vrlo jednostavan,wrapper,header,left i right column te footer.

Ja želim ovaj p staviti desno u footer,pa evo kod ako neko može pomoći da to ispadne kako treba.

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;

}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 678px;
display: inline;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding:10px;
}

.mojP
{

font-size: 10px;
font-weight: bold;
float:right;
margin-right:10px;

}

7

na .mojP dodaj širinu koja ti je potrebna, jer je p po defaultu block element i zauzima 100% širine

8

Hvala na pomoći,ali nikako ne uspijevam.P stoji desno,ali je kompletno izvan footera,mijenjao sam širinu i ništa se ne desi,i dalje je van footera.Znam da tlačim,ali ako ti nije problem da reproduciraš ovo kod sebe i namjestiš ovaj p unutar footera?

9

Postaj mi i html, može i na PM.

10

dodaj ovo u css

.clear { clear: both; }

a ovo ispod p u html-u:

i to je to

11

Šta reči nego hvala puno!

12

no problemo