Question

Jak zapobiec "najeżdżaniu" na siebie elementów ? html & css

Dajmy np. mam przyciski - mają tam w css bordery, paddingi itp

Ale jak W CSS zapobiec takiemu najeżdżaniu ? Ustalić ile wokół tego elementu ma być wolnego miejsca?

Oczywiście wiem że w html można zrobić to sztywno <br> i &nbsp;

ale ja bym chcial w css

Comments

O co pytasz? <br> i &nbsp; powodują przejście do nowej linii (w css wystarczy ustawić element blokowy) a odstępy ustawia się za pomocą marginesów.

Uwaga: margin collapsing

---

@Igorek, pokaż kod powodujący najeżdżanie.

---

{%extends "base.html"%}
{%block title%}Profil {{name}}{%endblock%}
{%block body%}
    <div class="content" >
   <h3> Profil użytkownika <span style="color: lime">{{name}}</span></h3>
    </div>
    <div class="content">
        <span>Obserwatorzy: {{countFollows}}</span>
        {%if clientProfil%}
        <p style="background-color: gray; border: 2px dotted green; display: inline-block; padding: 2px;">Nie możesz sie sam obserować</p>
        {%elif clientFollowing%}
        <p style="background-color: gray; border: 2px dotted green; display: inline-block; padding: 2px;">Obserwujesz tego użytkownika :D</p>
        {%else%}
        <form action="/user/{{name}}" method="POST">
            <input type="submit" value="Zaobserwuj" class="bttns">
        </form>
        {%endif%}
    </div>
    <br>
    
    <div class="content" style="font-size: 17px">
        <p>Opis użytkownika:</p>
        {{description}}
    </div>
    <br>
    <div class="content" style="height: 300px; overflow-y: scroll;" >
    {%if countPost > 0 %}
    <span>Posty użytkownika:</span>
    {% for x in posts%}
    <br><br> 
    <a class="listElement"href="/post/{{ids[x]}}">{{x}}</a>    
    
    {%endfor%}
    {%else%}
    <p class="error">Użytkownik nie ma postów :(</p>

    {%endif%}
    </div>
    
    <br><br>
    
    <a href="/" class="logout" style="position: absolute; left: 10px;">Powrót</a>
{%endblock%}

to jest tam kod z flaskiem i pythonem i tutaj samego najeżdzania nie ma bo dałem kilka <br>, ale gdy jest jeden własnie np. border jednego elementu wchodzi za drugi border