Hi :How to reduce the excess distance between the image and the background ;

Question

https://code.sololearn.com/Wa1gm0HsbR4o/?ref=app

Answer 1

Check the css-properties: They start with small letters, not with capital letter.

Answer 2

0px instead of -10px

Answer 3

Hi Agram Person
Each web browser has its own set of default styles that it applies to web pages. As a result, websites may look slightly different when viewed in different browsers. CSS Reset is a technique used to avoid these differences and make web pages appear more consistent across browsers. For example, Bob_Li provides a simple example of a CSS Reset that you can use. In CSS, the asterisk (*) is like a magic wand that applies a style to every element on a web page, ensuring that no element is left out. However, one drawback is that you will need to manually edit every new element you include in your project. Which will lead to more code writing.

Answer 4

Agram Person some issues I noticed in your card is that depending on your screen size, since the width of your div is 108%, the background appears to run off the right side. Changing the width to 100% will correct that issue.

The second issue is with your margins. Simply removing them will reset to default values.

Lastly, regarding your "align-items center" property, since you included that only, the browser will try to automatically align items to adjust to the various screen sizes.

So simply removing that property will get rid of the unwanted gaps between the picture and the background.

https://code.sololearn.com/Wk64Og4b4Ce6/?ref=app

Answer 5

Thanks for the note

Answer 6

Check line 16: you don't need a top-margin

Answer 7

Bob_Li min-height:200px; is good idea

Answer 8

Bob_Li andChris Coder I liked your suggestions.and I wish you success in your projects

Answer 9

But there's a margin above the picture.

Answer 10

Agram Person
this?

https://code.sololearn.com/WUctvJefNkGL/?ref=app

Answer 11

Yes. How to reduce the distance between images and 'li' without project collapse

Answer 12

Or in another way, how can I evolve part of the code without affecting the rest?

Answer 13

Agram Person
What i usually do is apply a global reset
*{
padding:0;
margin:0;
box-sizing: border-box;
}
then add in the required margins and paddings later on

Compartmentalize your code into sections of divs. One big container div for nesting everything. Smaller sub sections for more fine grained arrangement.

Answer 14

*{

}
Is it the one that gives you better control over the code?

Answer 15

It works for me, since paddings and margins are 0 and not some unknown default value.

study my code to see how things are nudged into place.

Answer 16

Agram Person
even simpler if you use the image as a background image.

https://code.sololearn.com/WzwreuyCQSZh/?ref=app

Answer 17

As per my observation you just need 2 things to configure in your css.
First apply on the body a 0 padding and box-sizing in border-box. Then remove the margin-left in your img class or make it to 0 value.

Answer 18

You can use the background-position in the CSS style to reduce the size of the image