i have a silly doubt

what is that space above that line ?
47 Replies
indee
indeeβ€’16mo ago
body {
font-family: Arial, sans-serif;
font-size: 19px;
background-color: #FAF3F0;
height: 100vh;
}

article {
margin: auto;
max-width: 65ch;
padding: 20px;
border: 1px solid black;
box-shadow: 5px 5px 0 #DBC4F0;
margin-top: 20px;
margin-bottom: 20px;
}

article>h1 {
background-color: #DBC4F0;
}

.post-meta {
color: #888;
font-style: italic;
}


img{
object-fit: contain;
width: 50%;
margin-top: 20px;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
font-family: Arial, sans-serif;
font-size: 19px;
background-color: #FAF3F0;
height: 100vh;
}

article {
margin: auto;
max-width: 65ch;
padding: 20px;
border: 1px solid black;
box-shadow: 5px 5px 0 #DBC4F0;
margin-top: 20px;
margin-bottom: 20px;
}

article>h1 {
background-color: #DBC4F0;
}

.post-meta {
color: #888;
font-style: italic;
}


img{
object-fit: contain;
width: 50%;
margin-top: 20px;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article>
<h1>Blog Post Title</h1>
<p class="post-meta">Posted on July 16, 2023</p>
<img src="./images/main.jpg" alt="Blog Post Image">
<h3>Ingredients</h2>
<ul>
<li>Palak (Spinach) - 1 bunch (Leaves only)</li>
<li>Onion - 3 medium, cut in cubes</li>
<li>Tomato - 1, cut in cubes</li>
<li>Green Chillies - 8 to 10</li>
<li>Cloves (Lavang) - 4 to 5</li>
<li>Cinnamon (Dalchini) - 1 inch piece</li>
<li>Garlic - 4 to 5 pods (Optional)</li>
<li>Ginger - 1 inch piece</li>
</ul>
<img src="./images/1.jpg" alt="hehe">
<ul>
<li>Kasoori Methi - 2 tsp</li>
<li>Amchur Powder - 1 tsp</li>
<li>Kitchen King Masala - 1 tsp</li>
<li>Salt</li>
<li>Sugar - 1/2 tsp</li>
<li>Oil - 2 tsp</li>
<li>Milk - Half a cup</li>
<li>Paneer - 200g, cut into small cubes</li>
</ul>
<img src="./images/2.jpg" alt="hehe">
<h3>Method</h2>
<ol>
<li>In a kadai, add 2 tsp oil.</li>
<li>Add the cloves and cinnamon.</li>
<li> 3. Add onions, tomato, green chillies, ginger and garlic. Fry for a few minutes till the onions soften and are glossy. Add a pinch of salt. switch off the stove and the let it cool down. <p>(The process continues from Step 7)</p></li>
</ol>

<img src="./images/3.jpg" alt="hehe">

</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article>
<h1>Blog Post Title</h1>
<p class="post-meta">Posted on July 16, 2023</p>
<img src="./images/main.jpg" alt="Blog Post Image">
<h3>Ingredients</h2>
<ul>
<li>Palak (Spinach) - 1 bunch (Leaves only)</li>
<li>Onion - 3 medium, cut in cubes</li>
<li>Tomato - 1, cut in cubes</li>
<li>Green Chillies - 8 to 10</li>
<li>Cloves (Lavang) - 4 to 5</li>
<li>Cinnamon (Dalchini) - 1 inch piece</li>
<li>Garlic - 4 to 5 pods (Optional)</li>
<li>Ginger - 1 inch piece</li>
</ul>
<img src="./images/1.jpg" alt="hehe">
<ul>
<li>Kasoori Methi - 2 tsp</li>
<li>Amchur Powder - 1 tsp</li>
<li>Kitchen King Masala - 1 tsp</li>
<li>Salt</li>
<li>Sugar - 1/2 tsp</li>
<li>Oil - 2 tsp</li>
<li>Milk - Half a cup</li>
<li>Paneer - 200g, cut into small cubes</li>
</ul>
<img src="./images/2.jpg" alt="hehe">
<h3>Method</h2>
<ol>
<li>In a kadai, add 2 tsp oil.</li>
<li>Add the cloves and cinnamon.</li>
<li> 3. Add onions, tomato, green chillies, ginger and garlic. Fry for a few minutes till the onions soften and are glossy. Add a pinch of salt. switch off the stove and the let it cool down. <p>(The process continues from Step 7)</p></li>
</ol>

<img src="./images/3.jpg" alt="hehe">

</article>
</body>
</html>
\ html and css is here
Mannix
Mannixβ€’16mo ago
margin-top from article
indee
indeeβ€’16mo ago
but why is it doing for the whole body not just the article
Mannix
Mannixβ€’16mo ago
something somethin collapsing margins
indee
indeeβ€’16mo ago
help me pls i dint get that
13eck
13eckβ€’16mo ago
The body element has a default 8px margin. If you want to remove it set margin: 0; on your body selector
indee
indeeβ€’16mo ago
still the body is also comming down
Mannix
Mannixβ€’16mo ago
if you want to stick the article to the top remove the margin from body and margin-top from article
13eck
13eckβ€’16mo ago
Can you be more specific about what you’re talking about? Your initial question is pretty vague. What space above what line?
indee
indeeβ€’16mo ago
when i use do that margin-top and open the devtools and hover on the body there is a small gap but the article should have that gap
Mannix
Mannixβ€’16mo ago
because of collapsing margin that 8px margin you see on body is a part of the margin set on the article hope that makes sens
indee
indeeβ€’16mo ago
oh ok
indee
indeeβ€’16mo ago
how to do something like this ?
indee
indeeβ€’16mo ago
i want to achieve this overlappin thing
Mannix
Mannixβ€’16mo ago
position/translate/grid pick your flavor πŸ™‚
Satya
Satyaβ€’16mo ago
Grid didn't come to my mind. Kinda curious how to do that
indee
indeeβ€’16mo ago
grid lets do grid
Senra
Senraβ€’16mo ago
How do we do it using grid? I understood the position and translate approaches
indee
indeeβ€’16mo ago
@mannix_ got some audience ah ? noice
Senra
Senraβ€’16mo ago
Have you tried using relative positions and z-index?
indee
indeeβ€’16mo ago
ya bro but even i would like to try with grid
Senra
Senraβ€’16mo ago
πŸ˜‚ I suggest you go with translate then dude. It doesnt look that hard
indee
indeeβ€’16mo ago
@mannix_ pls help me Grid
Mannix
Mannixβ€’16mo ago
just because it's an option doesn't mean it's most viable
indee
indeeβ€’16mo ago
i will try it my self and let you know guys
Γ… Marlon G
Γ… Marlon Gβ€’16mo ago
Layout Land
YouTube
Overlap on the Web, Graphic Design Made Easy with CSS Grid
CSS Grid makes it easy to create overlap in our designs and opens up a world of new possibilities in graphic design on the web. For decades, we wanted to create these kinds of designs, but didn't have the tools. We trained each other to stop being creative and stop wanting to make such layouts. It's time to shake these old habits up and explor...
indee
indeeβ€’16mo ago
guys i think i got it
indee
indeeβ€’16mo ago
its almost easy i mean this is what i wanted
indee
indeeβ€’16mo ago
indee
indeeβ€’16mo ago
i need one help i want that red card width to be 65ch so how much the whole gird width to be .card-grid{ display:grid; max-width: calc(20px + 65ch); height: 500px; grid-template-columns: 20px 1fr 1fr 20px; grid-template-rows: 20px 20px 1fr 1fr 20px; margin: auto; } .card1{ background-color: blue; grid-row: 3 / 4; grid-column: 1 / 3; z-index: 3; } .card2{ background-color: red; grid-column: 2 / 5; grid-row: 2 / 5; } .card3 { grid-column-end: -2; grid-row: 1 / 4; } .card3 > img { object-fit: cover; width: 100%; } this is my css i want this card2 widht to be 65ch
Senra
Senraβ€’16mo ago
set that using a max-width property on card2, or if that doesnt work, try that on the card-grid. See if that works
Mannix
Mannixβ€’16mo ago
for all of you that wanted grid solution https://codepen.io/MannixMD/pen/VwVXVmv
Disco
Discoβ€’16mo ago
For the none of you that wanted negative margins https://codepen.io/adamantonio/pen/gOQeZMz
indee
indeeβ€’16mo ago
bro this is noice i love it
Senra
Senraβ€’16mo ago
dude wth! This was so simple.... why did anyone not think of that?
indee
indeeβ€’16mo ago
i did that i posted a pic see up you will get an ugly ass colors but overlapping pic
Mannix
Mannixβ€’16mo ago
it may be easy with margins but not responsive πŸ˜‰ so be careful with negative margins
Senra
Senraβ€’16mo ago
You can just use media queries to change margin to become positive for smaller screens?
indee
indeeβ€’16mo ago
this one pro i mean bro
Mannix
Mannixβ€’16mo ago
of course you can
Senra
Senraβ€’16mo ago
i need to practice. grids more. Just today I learnt so much can be done with grid 😌
indee
indeeβ€’16mo ago
yea i myself never loved css more
Mannix
Mannixβ€’16mo ago
Grid is love Grid is life πŸ˜„
indee
indeeβ€’16mo ago
btw i am making a food blog design i want some good color scheme where can i do that ? and is the grid setup i asked for is any good or should try something else and suggest me some bro pls
13eck
13eckβ€’16mo ago
If you have additional questions please make a new post in the appropriate channel
indee
indeeβ€’16mo ago
oh ok
Want results from more Discord servers?
Add your server