Czy ja nie umiem dodawać i odejmować?! ( czy może jest coś o czym nie wiem )

pytanie zadane 2 lutego 2019 w HTML i CSS przez Jakub 0 Pasjonat (23,120 p.)
zamknięte 3 lutego 2019 przez Jakub 0

Witam, oto wygląd tworzonej strony ( kolorowe tła bloków są ustawione specjalnie dla testu czy wszystko jest równe ) :

To kod html:

<!DOCTYPE html>

<html lang="pl-PL">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>

    <body>

       <div id="container">
            <header class="introduced">Witaj w naszej galerii!</header>

            <div class="content">

                <!--////////////////////////////////////////////////////////////////////////////////-->

                <div class="imageLeft">
                    <figure class="imgBox">
                        <a href="images/1full.jpg" target="_blink">
                            <img class="picture" src="images/1.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>

                <div class="imageRight">
                    <figure class="imgBox">
                        <a href="images/2full.jpg" target="_blink">
                            <img class="picture" src="images/2.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>

                <div class="nextRow"></div>

                <!--////////////////////////////////////////////////////////////////////////////////-->

                <div class="imageLeft">
                    <figure class="imgBox">
                        <a href="images/3full.jpg" target="_blink">
                            <img class="picture" src="images/3.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>

                <div class="imageRight">
                    <figure class="imgBox">
                        <a href="images/4full.jpg" target="_blink">
                            <img class="picture" src="images/4.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>

                <div class="nextRow"></div>

                 <!--////////////////////////////////////////////////////////////////////////////////-->

                 <div class="imageLeft">
                    <figure class="imgBox">
                        <a href="images/5full.jpg" target="_blink">
                            <img class="picture" src="images/5.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>
    
                <div class="imageRight">
                    <figure class="imgBox">
                        <a href="images/6full.jpg" target="_blink">
                            <img class="picture" src="images/6.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>
    
                <div class="nextRow"></div>
    
                <!--////////////////////////////////////////////////////////////////////////////////-->

                <div class="imageLeft">
                    <figure class="imgBox">
                        <a href="images/7full.jpg" target="_blink">
                            <img class="picture" src="images/7.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>
    
                <div class="imageRight">
                    <figure class="imgBox">
                        <a href="images/8full.jpg" target="_blink">
                            <img class="picture" src="images/8.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>
    
                <div class="nextRow"></div>
    
                <!--////////////////////////////////////////////////////////////////////////////////-->

                <div class="imageLeft">
                    <figure class="imgBox">
                        <a href="images/9full.jpg" target="_blink">
                            <img class="picture" src="images/9.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>
    
                <div class="imageRight">
                    <figure class="imgBox">
                        <a href="images/10full.jpg" target="_blink">
                            <img class="picture" src="images/10.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>
    
                <div class="nextRow"></div>
    
                <!--////////////////////////////////////////////////////////////////////////////////-->

                <div class="imageLeft">
                    <figure class="imgBox">
                        <a href="images/11full.jpg" target="_blink">
                            <img class="picture" src="images/11.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>
    
                <div class="imageRight">
                    <figure class="imgBox">
                        <a href="images/12full.jpg" target="_blink">
                            <img class="picture" src="images/12.jpg" alt="img"/>
                        </a>
                        <figcaption class="imgCaption">image</figcaption>
                    </figure>
                </div>

                <div class="nextRow"></div>

                <!--////////////////////////////////////////////////////////////////////////////////-->

            </div>
            
       </div>

    </body>

</html>

A to CSS:

#container {
    background-color: red;
}

.content {
    width: 700px;
    margin-left: auto;
    margin-right: auto; 
    padding: 50px;
    background-color: yellow;
}

.introduced {
    text-align: center; 
    font-size: 30pt;
    color: #0a75b3;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 50px;
    padding: 50px;
    border-bottom: 5px #0a75b3 dotted;
    margin-left: auto;
    margin-right: auto; 
    background-color: green;
}

.nextRow {
    clear: both; 
}

.picture {
    width: 325px;
    height: 200px;
}

.imgBox {
    padding: 0;
    margin: 0;
    text-align: center;
}

.imgCaption {
    padding: 5px;
}

.imageLeft {
    width: 325px;
    height: 200px;
    margin-right: 50px;
    margin-bottom: 50px; 
    float: left;
    
    background-color: blueviolet;
}

.imageRight {
    width: 325px;
    height: 200px;
    float: left;
    margin-bottom: 50px; 
    background-color: blueviolet;
}

Mój koszmar dotyczy żółtego bloku ( od id content ). Ma on szerokość 700px, i jak widać jest ona optymalna... najgorsze jest to że mi z wyliczeń wychodzi coś innego :/

No więc mamy dla tego bloku padding 50px ( z każdej strony ), dwa zdjęcia o szerokości 325px oraz prawy margines dla tego po lewej stronie wynoszący 50px. Więc dodajemy:

( 50px * 2 ) + ( 325px * 2 ) + 50px = 800px. Więc z wyliczeń wynika że szerokość diva content powinna wynosić 800px, w praktyce pasuje jednak 700px... Myślę nad tym już naprawdę długo, nie wiem kompletnie co się ze mną dzieje ;( ;(

Jest to problem w stylu: mierze wieloryba od lewej do prawej i od prawej do lewej i w obu przypadkach wychodzi mi inny wynik... w takim samym potrzasku jestem teraz.

Będę wdzięczny za pomoc...

komentarz zamknięcia: problem rozwiązany.

2	komentarz 2 lutego 2019 przez ScriptyChris Mędrzec (190,170 p.) Nie analizowałem kodu, ale pierwsza myśl po przeczytaniu, że masz problemy z wymiarami w CSS, to pobaw się property box-sizing.

komentarz 3 lutego 2019 przez Jakub 0 Pasjonat (23,120 p.)

@JSHolic

Dzięki, w wolnej chwili zerknę.

3 odpowiedzi

odpowiedź 2 lutego 2019 przez pablop76 VIP (123,640 p.)
wybrane 3 lutego 2019 przez Jakub 0

Najlepsza

Padding jest dopełnieniem i nie jest częścią szerokości elementu w rozumieniu rozmiaru pierwotnego tylko się do niego dodaje. Jeżeli ustawiasz padding to musisz odjąć go od szerokości lub zastosować box-sizing:border-box tak jak doradził Ci @JSHolic

Jeżeli coś nie działa tak jak się tego spodziewasz to sprawdzaj w narzędziach developera. Jest tam zakładka model pudełkowy, computed lub coś w tym stylu, zależy od przeglądarki i używanego języka

komentarz 3 lutego 2019 przez Jakub 0 Pasjonat (23,120 p.)

Dzięki, byłem pewny że padding działa do wewnątrz....Chociaż to by mi się wydawało bardziej logicznym rozwiązaniem, bo padding to przecież cześć wewnętrzna bloku. Poczytam jeszcze artykuł z linka :)

komentarz 3 lutego 2019 przez pablop76 VIP (123,640 p.)

Bo jest wewnątrz,ale wypełnienie tworzy dodatkową przestrzeń.

komentarz 4 lutego 2019 przez Jakub 0 Pasjonat (23,120 p.)

Wiem, to miałem na myśli, myślałem wcześniej że padding ogranicza wewnętrzną wielkość bloku na treść ( a na jego wielkość absolutną niema wpływu ). Tymczasem padding działa na rozmiary samego bloku.

odpowiedź 2 lutego 2019 przez niezalogowany

Jak ci radził @pablop76, wejdź do narzędzi developerskich przeglądarki i zobacz w akcji z różnymi szerokościami swojego diva.

W domyślnych ustawieniach bloku (box-sizing: content-box) width określa szerokość zawartości. Do tego dochodzą paddingi i obramowanie (border). U ciebie 2 obrazki po 325px + margines jednego z nich zajęły 700px. Dałeś padding 50px co zwiększyło szerokość o 100px (po 50px z lewej i prawej). Jak dasz box-sizing: border-box to blok będzie miał na sztywno 700px.

Poeksperymentuj w przeglądarce.

odpowiedź 2 lutego 2019 przez MiszczuBD Mądrala (5,320 p.)
przywrócone 2 lutego 2019 przez MiszczuBD

mi się zdaję że jak masz padding i "odstęp" 50px to na to samo wychodzi. Więc ten padding nie powinien byc brany pod uwagę (?) bo jak dasz margin-left: 50px; a padding: 50px; to w sumie jedno i to samo (pomijamy to że padding na wszystkie strony)