Cześć,

Jak w temacie, czy istanieje jakiś sposób w css zrobić aby można było utworzyć margines dla tekstu dla diva?

padding odpada ponieważ tłem jest obrazek i całośc by była nieładna estetycznie.

Ustalasz padding i pomniejszasz wymiary diva o ten padding. Przykładowo jeśli obrazek tła ma 200x200px i właśnie takie nadałeś width i height, to ustalając równomierny padding, dajmy na to 20px musisz odjąć tyle z każdej strony i nadać wymiar diva 160x160px. Drugim sposobem jest background-position: x y tak samo pozycję możesz ustalić samym background.

Dzięki działa.

Ale chyba jest problem ponieważ tekst to jest odsyłacz a gdy padding zabiera to pole zmniajszamy obrazek i trzeba celować praktycznie w napis aby kliknąc w odsyłacz.

Jeśli dobrze rozumiem to div jest tłem buttona? Prościej zrobić z odnośnika (a) blok i nadać mu tło:

[HTML] pobierz, plaintext 
a {
display: block;
width: 100px;
height: 35px;
padding: 5px;
background: url(tlo.jpg);
}
[HTML] pobierz, plaintext 

To nawet nie jest głupi pomysł ale jak wypozycjonować ten "a" na tle obrazka? I zrobić tak aby tło obrazka też całe tło było tym odsyłaczem.

Jeśli z a zrobisz display: block wtedy jest to odnośnik w postaci bloku, np o wymiarach 200x50px i wtedy gdziekolwiek by nie kliknąć na nim, nie musi być na tekście to jest to cały czas odnośnik.

To tło co miałeś w divie dajesz w a, nadajesz mu odpowiednie wymiary.

Najlepiej by było jakbyś podał fragment kodu HTML+CSS, bo tak to są tylko moje wyobrażenia.

Mam coś takiego:

[HTML] pobierz, plaintext 
<a href='index' class='p_ziemia'>Strona główna</a>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
a .p_ziemia {
  background-image: url('../images/inp_ziemia.png');
  width:130px;
  height:30px;
  display:block;
  cursor:pointer;
  color:f4f4f4;
  font-weight:800;
  text-decoration:none;
}
 
a .p_ziemia:hover {
  background-image: url('../images/inp_ziemia_hover.png');
  width:130px;
  height:30px;
  display:block;
  cursor:pointer;
  color:f4f4f4;
  font-weight:800;
  text-decoration:none;
}
[HTML] pobierz, plaintext 

Teraz nawet obrazek nie jest wyświetlany.

Dobra już sobie poradziłem.

Przyczyną tego, że obrazek się nie wyświetla może być nieprawidłowa ścieżka?

[HTML] pobierz, plaintext 
a .p_ziemia {
  background: transparent url('../images/inp_ziemia.png') top left no-repeat;
  width: 130px;
  height: 30px;
  display: block;
  cursor:pointer;
  color: f4f4f4;
  font-weight: 800;
  text-decoration:none;
}
 
a .p_ziemia:hover {
  background-image: url('../images/inp_ziemia_hover.png');
}
[HTML] pobierz, plaintext 

Nie musisz powtarzać dla hoverów wszystkich tych własności jak dla zwykłego a, wystarczy tło, poza tym lepszym rozwiązaniem jest jeden obrazek pod drugim i dla podświetlenia robisz tylko:

[HTML] pobierz, plaintext 
a:hover {
background-position: bottom left;
}
[HTML] pobierz, plaintext 

tak dla przykładu.

To, że obrazek się nie wyświetla jest winą tego że źle napisałeś selektory. Powinno być a.p_ziemia a nie a .p_ziemia
Takie małe wtrącenie do pierwszych postów. zawsze możesz też wykorzystać:

i możesz zapomnieć o wyliczaniu szerokości z uwzględnieniem paddingów