Margin:0; w divach.

pytanie zadane 2 stycznia 2019 w HTML i CSS przez hiveplay Początkujący (430 p.)

Witam

Aktualnie tworze strone która ma "płytki"

Aktulanie chce aby "plytki" były obok siebie bez odstępu.

Próbuje z margin:0; ale nie wychodzi.

<!DOCUMENT html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="main.css" type="text/css">
        <script src="script.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="table">
                <div class="tile"></div>
                <div class="tile"></div>
                <div class="tile"></div>
            </div>
        </div>
    </body>
</html>

.container
{	
	width:1000px;
	text-align:center;
	margin-right:auto;
	margin-left:auto;
}
.tile
{
	height:30px;
	width:30px;
	border:solid black;
	margin:0;
	display:inline-block;
	background-color:red;
}
.tile2
{
	height:30px;
	width:30px;
	display:inline-block;
	background-color:red;
}

4 odpowiedzi

odpowiedź 2 stycznia 2019 przez spamator12 Nałogowiec (28,230 p.)

html, body, div{margin:0;padding:0;}

Pokaż 6 poprzednich komentarzy

komentarz 4 stycznia 2019 przez Tomek Sochacki Ekspert (227,490 p.)

a ja widze i w kazdej stronce jest to stosowane.

wszystko zależy jak podchodzisz do projektowania aplikacji webowych... Ty widzę, że żyjesz jeszcze starą szkołą, gdzie patrzyło się na cała aplikację jak na jeden monolit... dzisiaj apki piszę się w systemie komponentowej co daje znacznie więcej korzyści. Szczerze to nie widzę żadnego argumentu za zarzuceniem podejścia komponentowego na rzecz dawnego monolitu dla aplikacji... A jak zaczniesz myśleć komponentowo to nagle okazuje się, że w stylach body wystarczy max-width i ewentualnie font... nic, kompletnie nic więcej.

I nie piszę tego jako teoretyk, tylko na podstawie własnych doświadczeń z różnych aplikacji webowych... nikt mnie dzisiaj nie przekona do tworzenia monolitów i odrzucenia podejścia komponentowego... do resetów css też mnie nikt nie przekona :)

a tak na marginesie:

chodzby po to aby strona zajmowala caly ekran

jak już dajesz takie zalecenia to może warto dopisać o zachowaniu rozsądnego max-width... serio, każda strona ma się otwierać na maksymalnej rozdzielczości na szerokich ekranach...? Widzę, że nie analizujesz kompletnie statów Twoich aplikacji... zdziwiłbyś się jak znaczący udział w odsłonach aplikacji webowych mają ekrany o innerWidth ponad 2500px...

komentarz 4 stycznia 2019 przez Eimens Maniak (69,240 p.)

Wyzerowanie marginesu dla body jest faktycznie często spotykaną praktyką. Natomiast pytanie wcale nie tyczyło się marginesu od krawędzi strony, tylko od poprzedniego kafelka. Gdzie wyzerowanie właściwości margin dla html, body i div nie miało nic do rzeczy. Korzystając z DevTools można w łatwy sposób sprawdzić że pomiędzy kafelkami nie ma marginesu i jest to wina zmiany właściwości display.

komentarz 4 stycznia 2019 przez Comandeer Guru (604,920 p.)

@Tomek Sochacki, a ja pozwolę sobie być adwokatem diabła: internet nie składa się tylko z komponentowych aplikacji, lecz przede wszystkim ze stron. A tutaj, zwłaszcza przy prostszych projektach, podejście komponentowe nie daje aż takich korzyści. Na prostej stronie-wizytówce ścisły podział na komponenty może wręcz obniżyć produktywność, przez narzut boilerplate'u i silne granice między komponentami.

Poza tym minimalne style globalne często istnieją też w bardziej komponentowych aplikacjach.

komentarz 4 stycznia 2019 przez Tomek Sochacki Ekspert (227,490 p.)

Takie prostsze strony to powinno się robić w WIX, a nie klepać kod ręcznie :P

komentarz 4 stycznia 2019 przez spamator12 Nałogowiec (28,230 p.)

@Tomek Sochacki heheh mozna i tak, ale w sumie nie tylko proste, mutant year zero nawet na poczatku walneli na wixie co mnie mocno zdziwiolo (teraz przebudowali na pressa)

nawet jest tego troche - https://www.designbombs.com/examples-of-websites-using-wix/

"I nie piszę tego jako teoretyk, tylko na podstawie własnych doświadczeń z różnych aplikacji webowych..."

ja dokladnie tak samo, mozna wziasc przyklad zwyklego buttona. NIe wiem co ma custom browser style do monolitow czy packow. Jak chcesz zmodyfikowac tego buttona czy tam body czy jeszcze cos innego co jest ustawione przez browsera to obojetnie czy bawisz sie z moduly czy nie, po prostu robisz to. Czy zrobisz to za pomoca resetu css, czy js, czy przez satelite nasa, czy modul juz ma wbudowane zastepstwo, nie wazne, byle by wiedziec o co chodzi - ze browser narzuca niektore style (bo to jest czasami zaskoczeniem dla nowicjuszy).

A co do prostych stronek, z moje doswiadczenia wycodzi ze nic nie przebije static page + odrobinka prostego js (np jakas mini galeria). Uwazam podobnie do dowodcy - jezeli chodzi o szybkosc, seo, czas, czytelnosc, prostote to kombajny/modularnosc/modulowosc nie sa potrzebne. Przy duzych projektach sa wymagane.

Proponuje wykasowac te posty i zostawic tylko male info, ze browser ma defaultowe style odnosnie niektorych elementow, wraz z rozwiazaniem do pytania @hiveplay. Po co mieszac chlopakowi.

odpowiedź 4 stycznia 2019 przez Eimens Maniak (69,240 p.)

Cześć.

Sprawdź proszę co się stanie jak usuniesz następującą linijkę.

display: inline-block;

Tak w tym jest pies pogrzebany. Ustawić 3 boxy obok siebie nie będzie trudne. Natomiast jeżeli chcesz uzyskać najlepszą odpowiedź należałoby jakoś zilustrować to, jak finalnie ma wyglądać ten element na stronie.

Możesz to zrobić za pomocą display: block; oraz float: left; można zrobić to za pomocą flex'a. Jest kilka możliwości...