Margin ve padding özellikleri kullanılarak görseldeki çıktı nasıl alınabilir?

Metehan Arar · 22 Eylül 2023

Margin ve padding özelliklerini kullanarak ekrandaki çıktıyı nasıl alabilirim?

TheAny · 23 Eylül 2023

Ödevin o senin. Nasıl yapacağını deneyip yanılarak sen öğrenmelisin.

MertDevP · 1 Şubat 2024

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="buyukkare">
        <div class="kare1">
            <div class="kucukkare1"></div>
        </div>
        <div class="kare2">
            <div class="kucukkare2"></div>
        </div>
        <div class="kare3">
            <div class="kucukkare3"></div>
        </div>
    </div>
</body>
</html>

CSS:

.buyukkare {
    padding: 15px;
    width: 550px;
    height: 500px;
    margin: auto;
    margin-top: 13%;
    border: 3px solid black;
    display: flex;
    justify-content: space-around;
}
.kare1 {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 150px;
    height: 150px;
    border: 2px solid black;
    background-color: green;
}
.kare2 {
    display: flex;
    justify-content: center;
    margin: auto;
    width: 150px;
    height: 150px;
    border: 2px solid black;
    background-color: yellow;
}
.kare3 {
    margin-top: 350px;
    width: 150px;
    height: 150px;
    border: 2px solid black;
    background-color: blue;
}
.kucukkare1 {
    border: 2px solid black;
    width: 50px;
    height: 50px;
    background-color: bisque;
}
.kucukkare2 {
    border: 2px solid black;
    margin-top: 5px;
    width: 50px;
    height: 50px;
    background-color: bisque;
}
.kucukkare3 {
    margin-left: 2px;
    margin-top: 94px;
    float: left;
    border: 2px solid black;
    width: 50px;
    height: 50px;
    background-color: bisque;
}

Daha temiz ve düzgün yazılabilir. Sabah sabah maksimum bu kadar çıkıyor. Sorunuz varsa sorabilirsiniz. Kolaylıklar dilerim.

Margin ve padding özellikleri kullanılarak görseldeki çıktı nasıl alınabilir?

Metehan Arar

Kilopat

Dosya Ekleri

TheAny

Gigapat

MertDevP

Decapat