WD 20. BoxModel,Margin&Padding

-

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body{
            background-color: #e6cbf8;
        }
       
        .container{
            background-color: rgb(231, 230, 241);
            border: 3px solid rgb(64, 6, 119);

            /* we can set margin/padding for top, bottom, left and right like this */
            /* padding-top: 79px;
            padding-bottom: 79px;
            padding-right: 79px;
            padding-left: 34px; */

            /* margin-top: 3px;
            margin-bottom: 5px;
            margin-left: 34px;
            margin-right: 5px; */

            /* margin: top right bottom left; */
            /* padding: top right bottom left; */
            /* margin: 23px 56px 6px 78px;*
            /* padding: 23px 56px 6px 78px;*
           
            /* padding: y(top/bottom) x(left/right); */
            /* margin: y(top/bottom) x(left/right); */
            padding: 34px 19px;
            margin: 14px 19px;
            border-radius: 23px;
            width: 533px;
            /* box-sizing: border-box; */
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>This is my heading</h3>
        <p id="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, totam voluptatem accusantium corrupti nisi natus quia asperiores laboriosam odio et, qui ipsa unde?</p>
    </div>

    <div class="container">
        <h3>This is my heading</h3>
        <p id="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, totam voluptatem accusantium corrupti nisi natus quia asperiores laboriosam odio et, qui ipsa unde?</p>
    </div>

    <div class="container">
        <h3>This is my heading</h3>
        <p id="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, totam voluptatem accusantium corrupti nisi natus quia asperiores laboriosam odio et, qui ipsa unde?</p>
    </div>
</body>
</html>

#Output:


Comments

Post a Comment

Popular posts from this blog

JAVA Lab Programs

-
1. Calculator using switch case: import java.util.Scanner; public class Calculator{ public static void main (String[] args) { Scanner scanner = new Scanner(System. in ); System. out .println( "Calculator" ); System. out .println( "1. Addition" ); System. out .println( "2. Subtraction" ); System. out .println( "3. Multiplication" ); System. out .println( "4. Division" ); System. out .println( "5. Exit" ); System. out .println( "Enter your choice: " ); int choice = scanner.nextInt(); switch (choice){ case 1 : System. out .println( "Enter two numbers: " ); int num1 = scanner.nextInt(); int num2 = scanner.nextInt(); int sum = num1 + num2; System. out .println( "The sum is: " + sum); break ; case 2 : ...
Read more

HANGMAN GAME

-
import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.Random; public class Main extends JFrame { private static final String[] WORDS = { "HELLO" , "WORLD" , "COMPUTER" , "JAVA" , "PROGRAMMING" , "ECLIPSE" }; private static final int MAX_TRIES = 6 ; private String wordToGuess ; private char [] guessedLetters ; private int triesLeft ; private JLabel wordLabel ; private JLabel triesLabel ; private JTextField letterInput ; private JButton guessButton ; public Main () { setTitle( "Hangman Game" ); setDefaultCloseOperation(JFrame. EXIT_ON_CLOSE ); setSize( 400 , 300 ); setLocationRelativeTo( null ); // Center window on screen // Initialize game state wordToGuess = selectWord(); guessedLetters = new char [ wordToGuess .length()]; triesLeft = MAX_...
Read more

Flutter Lab Program

-
5a1 import 'package:flutter/material.dart' ; class MyStatelessWidget extends StatelessWidget {   @override   Widget build ( BuildContext context) {     return Scaffold (       appBar : AppBar (         title : Text ( 'Stateless Widget Example' ),       ),       body : Center (         child : Text (           'Hello, Flutter!' , // In this example, MyStatelessWidget does not change after it is built. The text "Hello, Flutter!" is static.           style : TextStyle (fontSize : 24 ),         ),       ),     );   } } void main () {   runApp ( MaterialApp (     home : MyStatelessWidget (),   )); } 5a2 import 'package:flutter/material.dart' ; class MyStatefulWidget extends StatefulWidget {   @ override   _MyStatefulWidgetState createState...
Read more