i have a silly doubt

what is that space above that line ?

47 Replies

indeeOP•17mo 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•17mo ago

margin-top from article

indeeOP•17mo ago

but why is it doing for the whole body not just the article

Mannix•17mo ago

something somethin collapsing margins

indeeOP•17mo ago

help me pls i dint get that

13eck•17mo ago

The body element has a default 8px margin. If you want to remove it set margin: 0; on your body selector

indeeOP•17mo ago

still the body is also comming down

Mannix•17mo ago

if you want to stick the article to the top remove the margin from body and margin-top from article

13eck•17mo ago

Can you be more specific about what you’re talking about? Your initial question is pretty vague. What space above what line?

indeeOP•17mo 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•17mo 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

indeeOP•17mo ago

oh ok

indeeOP•17mo ago

how to do something like this ?

indeeOP•17mo ago

i want to achieve this overlappin thing

Mannix•17mo ago

position/translate/grid pick your flavor 🙂

Satya•17mo ago

Grid didn't come to my mind. Kinda curious how to do that

indeeOP•17mo ago

grid lets do grid

Senra•17mo ago

How do we do it using grid? I understood the position and translate approaches

indeeOP•17mo ago

@mannix_ got some audience ah ? noice

Senra•17mo ago

Have you tried using relative positions and z-index?

indeeOP•17mo ago

ya bro but even i would like to try with grid

Mannix•17mo ago

https://tenor.com/view/the-simpsons-homer-simpson-good-bye-bye-hide-gif-4983317

Tenor

Senra•17mo ago

😂 I suggest you go with translate then dude. It doesnt look that hard

indeeOP•17mo ago

@mannix_ pls help me Grid

Mannix•17mo ago

just because it's an option doesn't mean it's most viable

indeeOP•17mo ago

i will try it my self and let you know guys

Å Marlon G•17mo ago

https://youtu.be/EashgVqboWo

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...

indeeOP•17mo ago

guys i think i got it

indeeOP•17mo ago

its almost easy i mean this is what i wanted

indeeOP•17mo ago

indeeOP•17mo 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•17mo 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•17mo ago

for all of you that wanted grid solution https://codepen.io/MannixMD/pen/VwVXVmv

Disco•17mo ago

For the none of you that wanted negative margins https://codepen.io/adamantonio/pen/gOQeZMz

indeeOP•17mo ago

bro this is noice i love it

Senra•17mo ago

dude wth! This was so simple.... why did anyone not think of that?

indeeOP•17mo ago

i did that i posted a pic see up you will get an ugly ass colors but overlapping pic

Mannix•17mo ago

it may be easy with margins but not responsive 😉 so be careful with negative margins

Senra•17mo ago

You can just use media queries to change margin to become positive for smaller screens?

indeeOP•17mo ago

this one pro i mean bro

Mannix•17mo ago

of course you can

Senra•17mo ago

i need to practice. grids more. Just today I learnt so much can be done with grid 😌

indeeOP•17mo ago

yea i myself never loved css more

Mannix•17mo ago

Grid is love Grid is life 😄

indeeOP•17mo 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•17mo ago

If you have additional questions please make a new post in the appropriate channel

indeeOP•17mo ago

oh ok

Gaming

Programming

i have a silly doubt