Uporządkowanie tekstu w poszczególnych linijkach w polu na czarnym tle.

Question

Witam.

Na czarnym tle chciałbym umieścić tekst w linijce nr 2, 4, 6 i 8, ale z odstępami.

Linijka nr 1 - tu ma być puste pole

Linijka nr 2 - tu ma być tekst nr 1

Linijka nr 3 - tu ma być puste pole

Linijka nr 4 - tu ma być tekst nr 2

Linijka nr 5 - tu ma być puste pole

Linijka nr 6 - tu ma być tekst nr 3

Linijka nr 7 - tu ma być puste pole

Linijka nr 8 - tu ma być tekst nr 4

Linijka nr 9 - tu ma być puste pole

Chodzi mi o to, abym w linijce nr 1 mógł regulować wolny odstęp nad linijką nr 2. Coś w stylu enteru <br>, ale z możliwością regulacji odstępu w pikselach. I tak, aby puste pole w linijce nr 3, 5 i 7 miało ten sam wolny odstęp. Ale w linijce nr 9 chciałbym regulować wolny odstęp pod linijką nr 8.

Co muszę poprawić w kodzie?

<div class="content">
	<p>
		<span style="color: red; font-size: 11px">Tekst nr 1:	</span><span style="color: yellow; font-size: 11px">Tekst nr 1</span>
	</p>
	<p>
		<span style="color: red; font-size: 11px">Tekst nr 2:	</span><span style="color: white; font-size: 11px">Tekst nr 2</span>
	</p>
	<p>
		<span style="color: red; font-size: 11px">Tekst nr 3:	</span><span style="color: white; font-size: 11px">Tekst nr 3</span>
	</p>
	<p>
		<span style="color: red; font-size: 11px">Tekst nr 4:	</span><span style="color: white; font-size: 11px">Tekst nr 4</span>
	</p>
</div>

.content
{
	background-color: #000000;
	text-align: justify;
	width: 200px;
	height: 100px;
}

 

Answer 1

nie twórz pustych elementów, tylko dodaj do każdego elementu p odpowiedni margines.

.content > p
{
margin: 20px 0;
}

Jezeli chcesz ustawić inny odsęp dla jednego paragrafu użyj

.content > p:nth-child(tu-wpisz-numer-paragrafu)
{
margin: 10px 0;
}

Dla linijki 8 (ostatniej) możesz użyć

content > p:last-child
{
margin: 50px 0;
}

Pamietaj że marginesy łączą się.
Czyli jeżeli element na górze ma margines 20 a na dole ma 30 to to się nie doda.
Będzie widoczny tylko największy margines czyli 30

Comments

OK, dzięki.

Answer 2

W tym spanie dodaj:

margin-bottom: 10px;
margin-top: 10px;

 

Comments

Zrobiłem to w następujący sposób i jest super:

<div class="content">
	<p><span style="color: red; font-size: 11px">Tekst nr 1:	</span><span style="color: yellow; font-size: 11px">Tekst nr 1</span></p>
	<p><span style="color: red; font-size: 11px">Tekst nr 2:	</span><span style="color: white; font-size: 11px">Tekst nr 2</span></p>
	<p><span style="color: red; font-size: 11px">Tekst nr 3:	</span><span style="color: white; font-size: 11px">Tekst nr 3</span></p>
	<p><span style="color: red; font-size: 11px">Tekst nr 4:	</span><span style="color: white; font-size: 11px">Tekst nr 4</span></p>
</div>

.content
{
	padding: 5px 40px 6px;
	text-align: justify;
}

.content p
{
	margin: 10px 0px;
}

Wielkie dzięki za pomoc.