पैडिंग शॉर्टहैंड
CSS में padding प्रॉपर्टी आपको padding-top, padding-right, padding-bottom, padding-left एक साथ सेट करने की अनुमति देती है। यह एक शॉर्टहैंड प्रॉपर्टी है।
उदाहरण: padding:10px 5px 7px 10px;
- टॉप पैडिंग: 10px
- राइट पैडिंग: 5px
- बॉटम पैडिंग: 7px
- लेफ्ट पैडिंग: 10px
उदाहरण 1
<!DOCTYPE html>
<html>
<head>
<style>
div { height: 150px; width: 300px; padding: 5% 10% 20% 5%; background-image: url("https://www.tutorialspoint.com/images/home_tensor_flow.png"); text-align: center; font-weight: bold; font-size: 1.2em; box-sizing: border-box; }
div > div { border-radius: 80px; padding: 2em 2em; box-shadow: 0 0 4px 0.8px black; }
</style>
</head>
<body>
<div>Learn TensorFlow <div>TensorFlow is an open source machine learning framework for all developers.</div></div>
</body>
</html>
आउटपुट
उदाहरण 2
<!DOCTYPE html>
<html>
<head>
<style>
div { height: 150px; width: 100px; padding: 5% 1%; background-color: papayawhip; border-radius: 5%; box-sizing: border-box; }
div > div { width: 50px; height: 50px; border-radius: 50%; padding: 2em; box-shadow: 0 0 9px 1px black; }
span { padding: 10px; }
</style>
</head>
<body>
<div><div></div><span><i>button</i></span></div>
</body>
</html>
आउटपुट
