Inline block - ako funguje ? – CSS – Fórum

Inline block - ako funguje ?

~ Anonymní uživatel
~ 4 příspěvky

1. 6. 2016 #1

Ahojte,

snazim sa trochu preniknut do tajov CSS a tvorby layoutov a vcera som sa podla jedneho kurzu pokusil napodobnit isty web.

Bolo to velmi jednoduche, v podstate som hodil par block-level elementov pod seba a po nich nasledoval jeden <a> ktory mal vyzerat ako button. Natiahol som paddingy a zaoblil rohy a vsetko vyzeralo ok.

Za <a> som ale umietnil odstavec, ktory bol ale prekryvany tym odkazom (jeho paddingom). Patral som v zdrojakoch toho webu ako to riesia a vsimol som si, ze na <a> maju v CSS display: inline-block. Ked som to prepouzil, odstavec sa posunul pekne pod <a> element aj s padingami.

O inline-block viem, ze sa sprava ako inline, ale mozem mu nastavit block vlastnosti, ale neviem ktora jeho vlastnost toto sposobila. Asi by pomohol zdrojak, ale ten prave pri sebe nemam (som v praci). Mozem ho dodat neskor. Stranka o ktoru mi slo je tato: http://muz.li/

Nahlásit jako SPAM

IP: 94.124.145.–

peter

~ Anonymní uživatel
~ 4014 příspěvků

1. 6. 2016 #2

No, moc to neresim. Vim, ze inline-block resi problemy s float. Jinak pouzivam spis block nebo inline.

Musel bys mit ten kod. Z tveho popisu vyplyva, ze mas <a>xxx</a> <p>yyy</p>. To by se melo za kazdych okolnosti P zarovnat pod A. Pokud do toho nesahas pres position nebo float. Ale A je za normal okolnosti inline, cili neco jako span, takze u nej v nekterych prohlizecich nepujde nastavovat padding zhora (da se nahradit line-height, font-size). A mozna i zleva a zprava (da se nahradit text-indent).

Co se tyce CSS, tak pouziti vidim u techto vlastnosti

http://mlich.zam.slu.cz/x/css/vlastnosti.htm

Grafika - barvy, obrázky, rámečky
background 	barva pozadí, obrázek
border 	rámeček
color 	barva textu

Poloha, rozměry, odsazení
margin 	odsazení - kolem rámečku
padding 	odsazení - od rámečku dovnitř
width 	blok - sířka (explorer minšířka)
height 	blok - výška (explorer minvýška)
line-height 	inline - výška (* font-size)
max-width 	blok - maxšířka (mozilla)
max-height 	blok - maxvýška (mozilla)
min-width 	blok - minšířka (mozilla)
min-height 	blok - minvýška (mozilla)
position 	pozicování
z-index 	pozicování - hloubka
top 	pozicování - z hora
right 	pozicování - z prava
bottom 	pozicování - ze spodu
left 	pozicování - z leva
float 	floatování (* position:relative)
clear 	floatování - ukončení

Text. upravy
font 	text - font
font-weight 	text - tlusté
font-style 	text - zešikmení
text-decoration 	text - podtržení
text-transform 	text - malé velké písmena AZ az, az AZ
text-align 	zarovnání na délku
text-indent 	odsazení zleva
letter-spacing 	mezera mezi znaky
word-spacing 	mezera mezi slovy
white-space 	zalamování
overflow 	přetečení přes okraj bloku

Ostatní
cursor 	tvar kurzoru myšky
list-style 	seznam UL LI
visibility 	viditelnost
display 	typ prvku inline/block/table
table-layout 	tabulka
vertical-align 	tabulka, obrázek - zarovnání na výšku

Nahlásit jako SPAM

IP: 2001:718:2601:26c:c191:bd...–

Jon

~ Anonymní uživatel
~ 4 příspěvky

1. 6. 2016 #3

Dakujem za odpoved :)

Prave padding by mal v inline fungovat (mal by sa zobrazovat) vzdy, nie ?

Inak tu som nasiel nieco velmi zaujimave.

http://maxdesign.com.au/articles/inline/

"While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of the <a> element. As you can see, it has an affect on the content on each side, but not on content above or below:"

To CSS by chcelo zjednodusit ...

Nahlásit jako SPAM

IP: 94.124.145.–

Jon

~ Anonymní uživatel
~ 4 příspěvky

1. 6. 2016 #4

Takze kod:

<!doctype html>
<html>
	<head>
		<title>Design Breakfeast</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="content">
			<h1>Designers' Secret Source</h1>
			<h2>All the design inspiration you need</h2>
			<a href="#" class="button">Stay Inspired</a>
			<p class="notes">Muzli is a new-tab chrome extension, it will become your home page, so you don’t miss anything.</p>
		</div>
	</body>
</html>

body{
	margin: 0px;
	background-color: #8fd2d2; 
	font-family: 'Open Sans', arial, sans-serif;
}

h1, h2{
	color: #ffffff;
}

h1{
	
	font-size: 3em;
}

a.button{
	background-color: #FF2178;
	padding: 20px;
	border-radius: 5px;
	color: #ffffff;
	font-weight: 800;
	text-decoration: none;
	display: inline-block;
}

p.notes{
	font-size: smaller;
}

.content{
	width: 700px;
	margin: 0px auto;
	text-align: center;
}

A vysledok:

Připojen obrázek.

Co je spravne. Ked ale odstranim inline-block:

Připojen obrázek.

dostanem toto a to je zle.

Nahlásit jako SPAM

IP: 188.167.92.–

peter

~ Anonymní uživatel
~ 4014 příspěvků

2. 6. 2016 #5

Chova se to v podstate spravne. Zkus si pridat na konec smazani marginu. To nema na paddovani zadny vliv.

h1, h2, p, a {margin:0;}

Nahlásit jako SPAM

IP: 2001:718:2601:26c:892d:bf...–

peter

~ Anonymní uživatel
~ 4014 příspěvků

2. 6. 2016 #6

A dalsi kouzlo docilis, kdyz na konec pridas

a.button {z-index:-1; position:relative;}

Nahlásit jako SPAM

IP: 2001:718:2601:26c:892d:bf...–

Tomáš123 0

Newbie

2. 6. 2016 #7

#1 Jon
Display inline-block generuje inline-level block s tým, že vnútro prvku je formátované ako blok a prvok navonok sa správa ako riadkový. (viac)

V špecifikácii CSS 2.1 som v súvisiacich častiach nenašiel žiadnu zmienku o nevplývaní vertikálneho paddingu na ostatný obsah.

Element <a> by mal podľa HTML5 špecifikácie preberať display od rodiča (display: transparent). Vo Firefoxe, IE11 i Edgi má ale stále display: inline (pričom transparent je nepoznaná hodnota).

Riešením teda je, nastavovať okrem paddingu aj line-height, alebo používať display: inline-block (ktérý má o niečo horšiu podporu).

Nahlásit jako SPAM

IP: 85.159.111.–

Flu

~ Anonymní uživatel
~ 59 příspěvků

2. 6. 2016 #8

#4 Jon
Inline prvky si drží výšku řádku nehledě na paddingy, proto se ti to zobrazuje špatně a tlačítko leze do dalšího textu. Inline-block se chovají jako blokové jen se zobrazují vedle sebe a ne pod sebou jako klasické block.

To je asi nejjednoduší vysvětlení.

Nahlásit jako SPAM

IP: 93.157.132.–

Jon

~ Anonymní uživatel
~ 4 příspěvky

2. 6. 2016 #9

Dakujem za odpovede. Uz som to pochopil. Ospravelnujem sa za hlupu otazku, ale som nervozny ked pouzivam nieco co neviem ako funguje :)

Nahlásit jako SPAM

IP: 94.124.145.–

← Zpět na seznam vláken ← Zpět do Fóra