Nie działa margin.

Question

Witam.

Mam problem, a mianowicie nie chce mi zadziałać margin między elementami li.

Kod HTML:

            <div class="przebiegrealizacji">
			<ol>
				<li class="przebieg">1</li>
				<li class="przebieg">2</li>
				<li class="przebieg">3</li>
				<li class="przebieg">4</li>
				<li class="przebieg">5</li>
			</ol>
			</div>

Kod CSS:

        .przebiegrealizacji
		{
			width: 1000px;
			height: 400px;
			margin-right: auto;
			margin-left: auto;
		}
		.przebiegrealizacji > ol
		{
			margin-top: 20px;
		}
		.przebiegrealizacji > ol > li.przebieg
		{
			list-style: none;
			display: table-cell;
			width: 142px;
			height: 142px;
			border: 2px solid #008CBA;
			border-radius: 50%;
			vertical-align: middle;
			text-align: center;
			font-size: 70px;
			margin: 0 5px;
		}

Pozdrawiam.

Answer 1

Zamień display: table-cell; na display: inline-block;

Przy aktualnym ustawieniu, margin nie jest "akceptowany"

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Applies to	all elements, except elements with table display types other thantable-caption, table and inline-table. It also applies to

Poza tym, nie potrzebujesz selektora .przebiegrealizacji > ol > li.przebieg, wystarczy po prostu .przebieg - a w razie gdy zechcesz nadpisać styl dla li o klasie "przebieg", to sobie wtedy zrobisz bardziej specyficzny selektor.

http://www.standardista.com/css3/css-specificity/

 

Comments

Dziękuję, a czy jest jakiś odpowiednik dla vertical-align: middle;? Bo ten przestaje działać.

---

Zamień sobie vertical-align: middle; na line-height: 142px;  => 142 px, bo taką masz wartość height dla elementów .przebieg

---

Dziękuję bardzo za pomoc. :)