Различия между Block и Inline-Block, применение свойства display: inline-block в макете страницы.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Block и Inline-Block</title> <style> body { font: 80% arial, helvetica, sans-serif; } h1 { font-size: 1.5em; } h2 { font-size: 1em; } code { font-family: courier; } #example2, #example3 { background: #ccc; border: 2px solid black; } span { background: white; display: inline; border: 0.5em solid red; padding: 1em; margin: 0.5em; } span.altern8 { background: #5b5; } #example3 span { display: inline-block; } </style> </head> <body> <h1>Block и Inline-Block (with padding, border and margin)</h1> <p>Каждый из этих примеров содержит один и тот же HTML-код, но для элементов в первом задано значение <code>display: inline</code> а для элементов во втором задано значение <code>display: inline-block</code>.</p> <h2>Inline</h2> <p id="example2"><span>Этот</span><span class="altern8">Тот</span><span>Другой</span><span class="altern8">4</span></p> <h2>Inline-Block</h2> <p id="example3"><span>Этот</span><span class="altern8">Тот</span><span>Другой</span><span class="altern8">4</span></p> </body> </html>
Страницы в тему:
- Block и Inline-Block 1
- Block и Inline-Block 2
- Отображение (Продвинутый урок CSS)