Display Property in CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Display Property</title>
    <link rel="stylesheet" href="CSS/styleTen.css">
</head>

<body>
    <header>
        <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            alt="">
        <h3>Welcome to my Blog</h3>
    </header>
    <div class="container">
        <div class="box">
            <h4 class="heading">Heading</h4>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam dolor facilis distinctio cupiditate
                quidem voluptatem quisquam aspernatur, quaerat, sit aperiam omnis inventore qui commodi quae reiciendis
                porro possimus amet et eveniet architecto vel nesciunt expedita? Facilis eos dolore voluptate
                reiciendis, voluptas cupiditate iusto inventore!</p>
        </div>
        <div class="box">
            <h4 class="heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus distinctio et, nobis iste accusamus
                facilis ducimus commodi velit labore architecto ex fugiat cumque, voluptas nesciunt ab tenetur beatae
                est? Odit dolorem nemo tenetur doloremque repudiandae asperiores, deleniti fuga recusandae libero, vitae
                nesciunt quam hic!</p>
        </div>
        <div class="box">
            <h4 class="heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, explicabo. Eos voluptatum, vel
                odio aut alias voluptates quisquam inventore repudiandae expedita ipsa consequuntur animi voluptatem
                dolorum libero illum aperiam hic cum amet odit. Quod, adipisci consequuntur? Amet quam porro aliquam
                expedita minima dicta accusantium?</p>
        </div>
    </div>
</body>

</html>






Below is CSS/styleTen.css File.
* {
    box-sizing: border-box;
}

header {
    margin: auto;
    width: 1200px;
    border: 2px solid #ff0000;

    /*Here header is block element that's why we can set width to align in center position.
    block element consumes full screen width and inline element consumes only necessary width.
    In case of inline element, don't need to set width because inline element will automatically consume
    only necessary width.*/
}

img {
    width: 100px;
    height: 100px;
    margin: auto;
    display: block;
}

h3 {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0px;
}

.box {
    border: 4px solid #000000;
    background-color: #808080;
    margin: 4px 0px;
    padding: 23px;
    width: 33%;
    box-sizing: border-box;
    display: inline-block;
}

.container {
    margin: auto;
    width: 1000px;
}


Comments

Post a Comment