ความกว้างและความสูงขององค์ประกอบใน CSS

คุณสมบัติ CSS height และ width ใช้ระบุความสูงและความกว้างขององค์ประกอบตามลำดับ เราสามารถตั้งค่าค่าสูงสุดและต่ำสุดสำหรับคุณสมบัติเหล่านี้ได้โดยใช้ max-height, max-width, min-height, และ min-width properties

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS height และ CSS width property มีดังนี้:

Selector {    height: /*value*/    width: /*value*/ }

ความกว้างและความสูงจริงขององค์ประกอบคำนวณได้ดังนี้:

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS height และ CSS width properties:

<!DOCTYPE html> <html> <head> <style> #demo {    margin: auto;    width: 400px;    height: 80px;    border: 2px solid black;    display: flex;    border-radius: 15px; } #demo div {    flex: 1;    border: thin dotted;    border-radius: 50%;    line-height: 60px;    text-align: center; } #orange {    box-shadow: inset 0 0 8px orange; } #green {    box-shadow: inset 0 0 8px green; } #blue {    box-shadow: inset 0 0 8px blue; } #red {    box-shadow: inset 0 0 8px red; } </style> </head> <body> <div id="demo"> <div id="orange">Somebody</div> <div id="green">that I</div> <div id="blue">used</div> <div id="red">to know</div> </div> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style> article {    margin: 10% 35%;    box-shadow: 0 0 6px 1px black;    max-width: 200px;    max-height: 150px;    overflow: auto; } </style> </head> <body> <h2>Java 8 Features</h2> <article> Lambda expression adds functional processing capability to Java. Referencing functions by their names instead of invoking them directly. Interface to have default method implementation. New compiler tools and utilities are added like ‘jdeps’ to figure out dependencies. New stream API to facilitate pipeline processing. Improved date time API. Emphasis on best practices to handle null values properly. Nashorn, a Java-based engine to execute JavaScript code. </article> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: