Html Question posted in
Some basic documentation can be found here.

Html – Margin of a div not respected?

i learned all the important arguments of CSS3 but i still don’t understand this basic concept, i have an image with a <p> inside a div class = "man" that is displayed with the flex. But when i try to resize the window with the dev tools the margin right of the div colored with orange in the image is not respected, so the image seems stuck to the right side, of course the image for now has no padding/margin but there is a margin applied to the div that cointains both the <p> and the <img>, why it’s not respected? Code and image attached to the post, thanks my problem is here

<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.man {
      max-width: fit-content;
      margin: 20px;
      display: flex;
    }
    div.man p {
      margin: 0px;
    }
    div.man img {
      max-width: 450px;
      height: auto;
    }
    @media (max-width: 655px) {
      div.man {
        flex-direction: column;
      }
    }
  </style>
</head>

<body style="margin: 0px;">
  <div style="width: fit-content;" class="man">
    <img src="man2.jpg">
    <p>Questo concept restaurant desidera donare ai propri membri un viaggio sensoriale e spirituale tramite le linee
  del design, l'attenta scelta dei suoni, l'accurata selezione delle essenze, un'altra riflessione della
  funzionalità e della comodità
    </p>
  </div>

</body>

</html>

I’m trying to solve it but i can’t get it

Tags:

2

Answers


  1. 0

    In your case, the image has given a max-width property. but width not restricted to maximum of 100% of parent div.
    try to change the width of the image.then the problem will solve

    Login or Signup to reply.
  2. 0

    I am assuming that when you say respected, you want the image to fill the entire page, but limit it to a maximum width of 450px. If this is the case, then what I have done is added a width: 100% under div.man img.

    Notice that with this, the image margins are still in place, but the width of the image is not distorting the page layout.

    div.man {
  max-width: fit-content;
  margin: 20px;
  display: flex;
}

div.man p {
  margin: 0px;
}

div.man img {
  width: 100%;
  max-width: 450px;
  height: auto;
}

@media (max-width: 655px) {
  div.man {
    flex-direction: column;
  }
}
    <!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body style="margin: 0px;">
  <div style="width: fit-content;" class="man">
    <img src="https://picsum.photos/600/300">
    <p>
      Questo concept restaurant desidera donare ai propri membri un viaggio sensoriale e spirituale tramite le linee del design, l'attenta scelta dei suoni, l'accurata selezione delle essenze, un'altra riflessione della funzionalità e della comodità
    </p>
  </div>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search