Lv.16 HTML Block และ Inline

การแสดงผลของ HTML Block และ Inline นั้นคือเรียงต่อกัน หรือขึ้นบรรทัดใหม่

HTML Block และ Inline มีแท็กอะไรบ้าง

HTML Block มีดังต่อไปนี้

<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> และ <video>

การใช้งานจริง HTML Block

ถ้าเราใช้แท็ก <h1>-<h6> แบบนี้

<body>
	<h1>หัวเรื่อง h1</h1><h2>หัวเรื่อง h2</h2><h3>หัวเรื่อง h3</h3><h4>หัวเรื่อง h4</h4><h5>หัวเรื่อง h5</h5><h6>หัวเรื่อง h6</h6>
</body>
<!-- คงไม่มีใครเขียนแบบนี้นะ แค่ยกตัวอย่างเฉยๆนะ -->

ต่อให้เราเขียนติดกันแบบนี้ การแสดงผลก็ขึ้นบรรทัดใหม่ให้เสมอ เพราะแท็ก h1-h6 มีค่า display เป็น block เพราะเป็นค่าเริ่มต้นอยู่แล้ว แต่ถ้าเราอยากเปลี่ยนเป็นการแสดงผลบรรทัดเดียวก็ให้เปลี่ยน display เป็น inline

h1,
h2,
h3,
h4,
h5,
h6 {
	display: inline;
}

HTML Inline มีดังต่อไปนี้

<a>, <abbr>,<acronym>, <b>,<bdo>,<big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

การใช้งานจริง HTML Inline

<a href="#">nkaub 1</a>
<a href="#">nkaub 2</a>
<a href="#">nkaub 3</a>
<a href="#">nkaub 4</a>

เราเขียนแท็ก a คนละบรรทัดก็จริง แต่การแสดงผลเป็นบรรทัดเดียวนะครับ

ถ้าเราต้องการให้ขึ้นบรรทัดใหม่ ต้องเปลี่ยน display เป็น block

a {
  display: block;
}

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top