Jak zrobić odstęp pomiędzy treściami?

Question

Aktualnie brakuje odstępu (10px) pomiędzy treścią z cyfry 1 a cyfrą 2 oraz odstępu (10px) z cyfry 2 a cyfrą 3:

<div id="panel4" class="panel-4" aria-labelledby="tab4" role="tabpanel" aria-hidden="true">
	<div class="box4">
		<div class="border-left">
			<div class="border-right">
				<div class="inner4">
					<ol>
						<li>Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</li>
						<li>Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</li>
						<li>Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst. Tu będzie napisany jakiś tekst.</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
</div>

.panel-4
{
	clear: both;
	width: 1000px;
}

.box4
{
	background-color: #000000;
	width: 100%;
}

.box4 .border-left
{
	background: url(obrazki/border-left.gif) repeat-y left top;
}

.box4 .border-right
{
	background: url(obrazki/border-right.gif) repeat-y right top;
}

.box4 .inner4 ol
{
	padding: 20px 55px 10px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

Czy da sie wprowadzić odstęp (10px) pomiędzy podanymi treściami?

Tylko nie piszcie mi, żebym pokombinował z paddingami. :)

Answer 1

To pokombinuj z marginami-bottomami :), jak ci paddingi się nie podobają. Dla ostatniego li nie ustawiaj marginu (:last-child).

Comments

Żaden margin-bottom, bo nie przetestowałeś i piszesz w ciemno.

---

Nie pisze w ciemno, bo da się 

[ on-line ]

.box4 .inner4 
{
    padding: 10px;
}

.box4 .inner4 ol
{
  margin: 0 auto;
  font-size: 12px;
  text-align: justify;
  color: #DDDDDD;
  line-height: 1.4;
  width: 90%;
  padding: 0;
}

.box4 .inner4 ol li:not(:last-child)
{
  margin-bottom: 20px;
}

 

Answer 2

Brakuje odstępu, bo go nigdzie nie ustawiasz. Obecnie masz ustawiony padding jedynie całego elementu "ul". Jeśli chcesz ustawić padding między elementami tej listy to odwołujesz się do "li".

.box4 .inner4 ol li
{
     padding: 10px 0;
}

 

Comments

Zrobiłem w ten sposób i jest dobrze:

<ol>
	<li>Tu będzie napisany jakiś pierwszy tekst.</li>
	<li>Tu będzie napisany jakiś drugi tekst.</li>
	<li>Tu będzie napisany jakiś trzeci tekst.</li>
	<li>Tu będzie napisany jakiś czwarty tekst.</li>
	<li>Tu będzie napisany jakiś piąty tekst.</li>
</ol>

.box4 .inner4 ol
{
	padding: 5px 50px 5px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

.inner4 li
{
	margin: 10px 0px;
}

Teraz jest odstęp pomiędzy numeracją tekstu. Odpowiada za to margin: 10px. Za wyśrodkowanie tekstu odpowiada padding: 50px (im mniej pikseli, tym tekst jest bardziej rozszerzony na obszarze czarnego tła wraz z grafiką gif).

Czy Twoje rozwiązanie jest jeszcze lepsze?

---

Twoje rozwiązanie jest identyczne, bo zapis ".inner4 li" informuje, że ma to dotyczyć wszystkich li w bloku o klasie .inner4, a li jest w bloku o klasie .inner4 tylko trochę "głębiej", mój sposób dokładniej opisuje, które li chcesz ostylować, bo musi być spełniony dodatkowy warunek, że li jest w bloku ol, a blok ol jest w bloku z klasą .inner4 a klasa .inner4 jest w bloku o klasie .box4.

Co do wyśrodkowania tekstu za pomocą padding: 50px; to jest to błąd, bo jest to wartość stała i nie zmienia się wraz z wielkością ekranu użytkownika. Czyli albo komputer albo telefon i tak będzie 50px, co nie daje takiego samego efektu wyśrodkowania. Lepiej tu używać "margin: 0 auto;" dla li, co zawsze wyśrodkuje element.

---

Skoro padding: 50px jest błędem, to jaki zapis jest najlepszym rozwiązaniem?

Masz na myśli coś takiego?

.box4 .inner4 ol
{
    margin: 0 auto;
    font-size: 12px;
    text-align: justify;
    color: #DDDDDD;
    line-height: 1.4;
}
 
.inner4 li
{
    padding: 10px 0px;
}

 

---

Żebyśmy się dobrze zrozumieli - chcesz wyśrodkować tę listę na ekranie?

Jeśli tak to dopisujesz tę linijkę "margin: 0 auto" do li, co po połączeniu z obecnym stylem li da "margin: 10px auto;".

---

Ta lista ma być wyśrodkowana tylko na tym czarnym tle.

Tak wygląda wersja testowa na przykładzie mojego kodu:

https://imagizer.imageshack.com/img923/9056/lXaLdP.jpg

Szare tło po lewej, po prawej i na dole to pozostała zawartość strony. A te przykładowe teksty z poszczególnymi numeracjami mają sie znajdować tylko na tym czarnym tle.

---

To jest już ładnie wyśrodkowane, jeśli Ci chodzi o efekt wyśrodkowania całego tekstu to dodaj "text-align:center;".

---

Bardziej odpowiada mi "text-align:justify;", bo po lewej i po prawej stronie linijki tekstu są wyrównane. Przy "text-align:center;" już nie ma tego efektu.

Tu jest pokazana różnica:

https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-align&preval=justify

Żeby nie przedłużać pisania...

Aby ta numeracja tekstu była wyświetlana prawidłowo na komputerze i telefonie (tak jak widać na zdjęciu wrzuconym na imageshack.com), to mam zastosować taki zapis w CSS ?

.box4 .inner4 ol
{
    margin: 0 auto;
    font-size: 12px;
    text-align: justify;
    color: #DDDDDD;
    line-height: 1.4;
}
  
.inner4 li
{
    padding: 10px 0px;
}

Jak powinno być to prawidłowo zapisane w CSS ?

---

Tak

---

Przy takim zapisie:

.box4 .inner4 ol
{
    margin: 0 auto;
    font-size: 12px;
    text-align: justify;
    color: #DDDDDD;
    line-height: 1.4;
}
   
.inner4 li
{
    padding: 10px 0px;
}

...wyszedł taki marny efekt:

https://imagizer.imageshack.com/img923/7514/RMcqnu.jpg

Zastosuję swój kod, a nie twój.