Korzystanie z siatki do układu, niech niechciane wyściółki po lewej stronie pierwszego zdjęcia

Question

W tym układzie po lewej stronie mojego pierwszego obrazu znajduje się niepożądane wypełnienie. Jedyne inne pytanie, które znalazłem w ten sposób, sugerowało umieszczenie margin: 0, ale już mam to na górze mojego css. Ta konkretna część mojego kodu jest częścią zapytania o media, jeśli jest to istotne. (również dla fragmentu #intro, dla mnie tutaj pokazuje, że niektóre z nich są wcięte inaczej od siebie, ale są wcięte bezpośrednio w tkaczu snów, ale edycja nie wydaje się ich tutaj naprawić)

	#intro{
	    display:grid;
		grid-template-columns: 1fr 1fr 1fr;
	    grid-template-areas: 
		"a c b";
		grid-column-gap: 40px;
		grid-template-rows: auto;
	}

	#intro img{
		padding-bottom: 30px;
	}

	#intro img:first-of-type{
		grid-area: a;
	}

	#intro img:last-of-type {
		grid-area: b;
	}

	#intro p{
		grid-area: c;
		font-size: 25px;
		padding:30px 0px;
		line-height: 40px;
		text-align: center;
	}

<section id="intro">
		
		
		<img src="https://via.placeholder.com/150/" alt="c 1">

		<img src="https://via.placeholder.com/150/" alt="c 2">

		<p>By popular demand...</p>
	
		
	</section>

css css-grid

0

erin 20 grudzień 2019, 08:01

Mam już reset CSS w kodzie.

–

erin

20 grudzień 2019, 08:58

Answer 1

Dodaj

body {
    margin: 0px;
}

body {
    margin: 0px;
}
#intro{
	    display:grid;
		grid-template-columns: 1fr 1fr 1fr;
	    grid-template-areas: 
		"a c b";
		grid-column-gap: 40px;
		grid-template-rows: auto;
	}

	#intro img{
		padding-bottom: 30px;
	}

	#intro img:first-of-type{
		grid-area: a;
	}

	#intro img:last-of-type {
		grid-area: b;
	}

	#intro p{
		grid-area: c;
		font-size: 25px;
		padding:30px 0px;
		line-height: 40px;
		text-align: center;
	}

<section id="intro">
		
		
		<img src="https://via.placeholder.com/150/" alt="c 1">

		<img src="https://via.placeholder.com/150/" alt="c 2">

		<p>By popular demand...</p>
	
		
	</section>

0

Mohamed Farouk 20 grudzień 2019, 08:06

Answer 2

html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
 max-width: 100%;
 height: auto;
}

Użyj Minimalnego resetowania CSS przed swoim stylem.

normalize.css

Sprawdź to pytanie dotyczące przepełnienia stosu

1

Akash Preet 20 grudzień 2019, 08:24

Korzystanie z siatki do układu, niech niechciane wyściółki po lewej stronie pierwszego zdjęcia

2 odpowiedzi

Podobne pytania

Powiązane pytania

Nowe pytania

css