Jak naprawić odstęp miedzy wyrazami?

pytanie zadane 29 czerwca 2017 w HTML i CSS przez xdmik23 Gaduła (3,000 p.)
edycja 29 czerwca 2017 przez xdmik23

Witam! Tworzę stronę,na której chciałbym umieścić kilka kółek z ikonami fontello wewnątrz,a pod spodem ma być tekst.Niestety w każdym tekście wyrazy są w róznych odstępach od siebie.Poniżej wrzucę kod:

 <div id="inner-wrapper">
  <section class="features">
  <div class="circle">
  <td><i class="icon-user"></i></td>
  </div>
  <h3>Innowacyjność</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non efficitur purus. Morbi fringilla posuere leo, nec condimentum ipsum sodales vitae.
  </p>
  </section>
  
  <section class="features">
  <div class="circle">
  <td><i class="icon-user"></i></td>
  </div>
  <h3>Innowacyjność</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non efficitur purus. Morbi fringilla posuere leo, nec condimentum ipsum sodales vitae.
  </p>
  </section>
  
  <section class="features">
  <div class="circle">
  <td><i class="icon-user"></i></td>
  </div>
  <h3>Innowacyjność</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non efficitur purus. Morbi fringilla posuere leo, nec condimentum ipsum sodales vitae.
  </p>
  </section>
  
  <section class="features">
  <div class="circle">
  <td><i class="icon-user"></i></td>
  </div>
  <h3>Innowacyjność</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non efficitur purus. Morbi fringilla posuere leo, nec condimentum ipsum sodales vitae.
  </p>
  </section>
 
   <section class="features">
  <div class="circle">
  <td><i class="icon-user"></i></td>
  </div>
  <h3>Innowacyjność</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non efficitur purus. Morbi fringilla posuere leo, nec condimentum ipsum sodales vitae.
  </p>
  </section>
  
  <section class="features">
  <div class="circle">
  <td><i class="icon-user"></i></td>
  </div>
  <h3>Innowacyjność</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non efficitur purus. Morbi fringilla posuere leo, nec condimentum ipsum sodales vitae.
  </p>
  </section>
  <div class="clearfix"></div>
  
 </div>

#inner-wrapper {

width: 100%;

margin-left: auto;

margin-right: auto;

margin-top: 2%;

text-align:center;

background:#FFF;

}

.features {

    

width:42%;

float:left;

margin:1% 4% 1% 4%;

 

}

.circle{

width:150px;

height:150px;

background:#333;

border-radius:50%;

}

.features i {

padding:10%  ;

font-size:555%;

}

p{

text-transform:uppercase;

text-transform:none;

text-align:justify;

letter-spacing:2px;

}

.clearfix {

clear:both;

}

komentarz 29 czerwca 2017 przez Shaoi Mądrala (7,020 p.)

Kod wstawiamy w przeznaczone do tego bloczki kodu.

2 odpowiedzi

odpowiedź 29 czerwca 2017 przez Shaoi Mądrala (7,020 p.)

Zacznijmy od tego, iż warto abyś przeczytał ten artykuł.

Nie stylizuje się po id, dodaj do wrappera po prostu klasę.

Nie wiem dlaczego używasz tutaj td.

Twój clearfix jest zły. Robi się to inaczej.

A Twój problem jest spowodowany wyjustowaniem textu.

komentarz 29 czerwca 2017 przez xdmik23 Gaduła (3,000 p.)

inaczej czyli mam dodać diva pod spodem?

komentarz 29 czerwca 2017 przez Shaoi Mądrala (7,020 p.)

Chodzi Ci teraz o clearfix?

odpowiedź 29 czerwca 2017 przez xmentor Nałogowiec (49,520 p.)

A co robi tam znacznik td?

Poczytaj jak wstawiać poprawnie ikony: https://comandeer.github.io/blog/a11y/html-css/2017/02/28/o-ikonkach-slow-kilka.html

komentarz 29 czerwca 2017 przez xdmik23 Gaduła (3,000 p.)

jak to wygląda w praktyce?Której metody powinienem użyć wstawiając ikonki w menu,a której do sytuacji przedstawionej w moim pytaniu?

komentarz 29 czerwca 2017 przez xmentor Nałogowiec (49,520 p.)

U Ciebie są to ikony czysto dekoracyjne, więc:

<span class="icon-user" aria-hidden="true"></span>

A w menu, to zależy.

komentarz 29 czerwca 2017 przez xdmik23 Gaduła (3,000 p.)

od czego zależy?

komentarz 29 czerwca 2017 przez xmentor Nałogowiec (49,520 p.)

Jak wyglądać ma menu. Różne są kombinacje. Czasami jest IKONA + nazwa odnośnika - wtedy ikona jest dekoracją. Może być tak, że w itemach menu widnieje jedynie ikona, wtedy stosujemy sposób z .visuallyhidden

komentarz 29 czerwca 2017 przez xdmik23 Gaduła (3,000 p.)

ok dzięki.Jestem już na dobrej drodze do stworzenia pierwszej strony,narazie do menu i slidera uzywam gotowych kodów z codepen.io.Mógłbyś mi polecić jakąś inną tego typu stronkę,bo chciałbym mieć obok menu logo,a w obecnym menu jest to niemożliwe?

komentarz 29 czerwca 2017 przez xmentor Nałogowiec (49,520 p.)

To kwestia odpowiedniego ostylowania elementów.

Przykładowy markup:

<header>
  <h1>Logo</h1>
  <nav>
    <h2>Menu</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </nav>
</header>

Nagłówek w menu możesz ukryć klasą .visuallyhidden

Flexem moża to ustawić na szybko lub użyć opływania(float).

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

komentarz 29 czerwca 2017 przez xdmik23 Gaduła (3,000 p.)

problem mam dalej z tekstem pod ikonkami bo mimo usunięcia justowania i wstawienia text-align:center; tekst nadal jest dziwny(w 1 linijce jest 1 krótkie słowo w innej 1 3 razy dłuższe,jeszcze w innej 2 krótkie. Co z tym zrobić?