Dezavantajul „display: block” pentru imagini? (Programare, Css, Imagine, Css Float, Poziționare, Responsive Design)

Baumr a intrebat.

Există vreun dezavantaj pentru a converti img din elemente inline-block în obiecte de tip bloc cu ajutorul funcției display: block proprietate CSS?

De cele mai multe ori, vreau ca acestea să fie block elemente. Orice lucru util inline aspecte utile pe care le pierd? (Poate că eu nu le văd pe unele ca fiind utile?)

Ar trebui ca toate imaginile să fie convertite în block elemente în mod implicit? De ce sunt elemente inline-block conform specificațiilor?

P.S. Întreb acest lucru cu considerații pentru aspect prin poziționare & float și elemente înconjurătoare.

Comentarii

  • De ce să nu încercăm și să vedem ce se întâmplă 😛 -).  > Por Rocket Hazmat.
  • De ce vrei ca ele să se comporte ca elemente de bloc? Care sunt cazurile de utilizare? –  > Por Ates Goral.
  • @Rocket, au deja – există ceva la care vă referiți? @Ates, cred că, în mare parte, ceea ce întreb este – de ce sunt considerate elemente inline-block de către specificații? De exemplu, acest lucru poate stârni unele probleme: stackoverflow.com/questions/1311111136/…  > Por Baumr.
  • Redeschis pe baza editărilor dvs., dar comunitatea este liberă să treacă peste mine. –  > Por Tim Post.
  • în css, „block” înseamnă să iei linia de așteptare și să faci o pauză –  > Por jondinham.
4 răspunsuri
David Nguyen

Ei bine, având în vedere că un bloc va forța tot ce urmează să facă o pauză de linie, există un singur scenariu în care ar fi rău:

Dacă intenționați să aveți un alt element inline (text, o altă imagine, span, etc) lângă el

Comentarii

  • Mulțumesc pentru implicare. Asta are sens. Din câte îmi dau seama, majoritatea site-urilor web folosesc în primul rând imaginile ca elemente de bloc. Cred că aș putea începe să adaug img { display: block; } la toate foile mele de stil. De obicei, aș face-o pe o bază de imagine la imagine dacă imaginea a cauzat o problemă, dar cred că această soluție este mai bună. Doar dacă nu cumva există potențiale „erori” în ceea ce privește aspectul sau neconcordanțe între browsere? –  > Por Baumr.
  • Aș vrea să pot răspunde la această întrebare, obișnuia să fie o problemă. Nu-mi amintesc exact problema, dar cred că a fost o inconsecvență de redare a imaginilor între browsere (IE6) pe care programatorii au trebuit să o adauge display: block –  > Por David Nguyen.
  • Da, îmi amintesc și eu ceva de genul ăsta… dar nu sunt sigur, de aceea întreb. Dar se pare că este destul de OK să faci asta 🙂 –  > Por Baumr.
DR01D

Puneți img { display: block; } în CSS-ul tău și uită de el. În cazul extrem de rar în care aveți nevoie de ceva diferit, scrieți o excepție.

Dr. Fred

Există un dezavantaj : Dacă intenționați să centrați orizontal o imagine aplicând „text-align:center” la elementul părinte, nu puteți afișa imaginea ca bloc sau inline-block.

Shachi

Un hack găsit pentru afișare bloc: „block”.

Am avut această imagine și wavesurfer audio wave pe care le doream ca inline.Dar, display: „block”; din js-ul wavesurfer nu permitea acest lucru.

Ceea ce am făcut a fost să salvez acest lucru cdn la nivel local și am schimbat display în inline și poziția la absolut ceea ce mi-a rezolvat problema. Modificarea ar trebui să se facă în locul în care este creat elementul wave.

Sper că acest lucru ajută pe cineva. Thanku wavesurfer creatori pentru un astfel de js uimitor.