Przesunięcie tekstu od obrazka w CSS

pytanie zadane 6 września 2022 w HTML i CSS przez domelcio Użytkownik (980 p.)

Hejka,

Chciałem się zapytać czego mógłbym użyć by oddalić tekst od zdjęcia nie używając padding'a ani margin'a?
O to moje CSS i HTML.

Link do zdjęcia: Document — Osobisty — Microsoft Edge (gyazo.com)

* {
    margin: 0px;
    padding: 0px;   
}

.kontener1 {
    display: flex;
    align-items: center;
    text-align: justify;
    
}

.p50 {
    width: 50%;
}

.B2C-kolor {
    color: #FF883B;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700px;
    font-size: 37px;
    line-height: 120,57%;
width: 50%;
text-align: center;

}

.phototwo {
    width: 50%;
}

.phototwo img {
    width: 100%;
}

.text-B2C {
    font-family:'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    width: 80%;
}

@media only screen and (max-width: 600px) {
    .phototwo, .p50 {
        width: 100%;
    } 
    .kontener1 {
        flex-wrap: wrap;
    }
}

HTML: 
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Prosto+One&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="sresposible.css">
    </a>
    <title>Document</title>
</head>
<body>
    <div class="kontener1">
        <div class="phototwo">
    <img src="phototwo.png">
        </div>
        <div class="p50">
            <div class="B2C-kolor">
                <h4>Sprzatąnie B2C</h4>
            </div>
                <div class="text-B2C">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut ligula vel ex pulvinar rutrum vitae et enim. Pellentesque hendrerit lacus vel lectus aliquet ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut ligula vel ex pulvinar rutrum vitae et enim. Pellentesque hendrerit lacus vel lectus aliquet ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut ligula vel ex pulvinar rutrum vitae et enim. Pellentesque hendrerit lacus vel lectus aliquet ultrices.</p>
                </div>
            </div>
        </div>

2 odpowiedzi

odpowiedź 6 września 2022 przez rafal.budzis Szeryf (85,700 p.)
wybrane 6 września 2022 przez domelcio

Najlepsza

Do .kontener1 możesz dopisać gap (przestrzeń miedzy elementami dla flexa lub grida).

Jednak nie rozumiem dlaczego nie margin?

komentarz 6 września 2022 przez domelcio Użytkownik (980 p.)
edycja 6 września 2022 przez domelcio

W sumie to sam nie wiem po prostu nikt tego nie używał u mnie tylko lecieli inaczej i z procentami może z powodu resposible który próbuje robić. A jest szansa by nie odchylał obrazka czy to już se muszę sam wystylizować?

komentarz 6 września 2022 przez rafal.budzis Szeryf (85,700 p.)

Przestań używać procentów i problem rozwiąże się sam ;)
Teraz może Ci się psuć jeśli dwa elementy mają 50 % i dodatkowo dodajesz gap np na 16px to masz razem 100% i 16px. Wówczas z elementów musisz odjąć połowe 8px np width: calc(50% - 8px);

Jednak najłatwiej wywalić procenty i zamienić flex na grid.

.kontener1 {
    display: grid;
    align-items: center;
    text-align: justify;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

grid-template-columns: 1fr 1fr; mówi o tym że mają być dwie kolumny takich samych wymiarów które zajmują wolną przestrzeń. Więc odejmowanie gap wykonuje się samo a ty pozbywasz się również procentów w .phototwo oraz .p50