Live
x
<html> <head> <title>Elementy liniowe</title> </head> <style> /* Elementy domyślnie blokowe */ div { border: 2px solid red; font-size: 1.5em; margin: 10px 0; } /* Elementy domyślnie liniowe */ input, button, span { border: 2px solid blue; font-size: 1.5em; margin: 10px 0; } /* <span /> jest domyślnie elementem liniowym, więc nie musimy mu ustawiać własności "display" */ span { /* Możemy oddzielać elementy liniowe od siebie za pomocą paddingów i marginów */ padding-right: 20px; } button { margin: 0 20px; } /* <div /> jest domyślnie elementem blokowym, więc aby zmienić go w element liniowy, musimy mu ustawiać własność "display" */ div.one { /* od teraz ten <div> będzie wyświetlany jak znacznik liniowy. */ display: inline; } </style> <body> <section> <span>span 1</span> <input placeholder="input" /> <button>button</button> <div class="one">div 1 (<code>display: inline</code>)</div> <div class>div 2</div> </section> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.