I have an image and a <p> inside a <div class = "man"> with display: flex. 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. The image for now has no padding/margin, but there is a margin applied to the div that contains both the <p> and the <img>; why is it not respected?
Screenshot of my issue w/ dev tools open
<!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>
4
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>
In CSS, a margin is the space around an element’s border, while padding is the space between an element’s border and the element’s content. If you are setting margin for a full width element, you may need to set its width using calc like width:calc(100% – 2x) where x stands for margin.
However, in your case, I believe using padding is a better choice. (Obviously, use it with box-sizing.)
div.man {
max-width: calc(100% - 40px);
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;
}
}
body{margin:0} <div style="width: fit-content;" class="man">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/1200px-Fronalpstock_big.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>
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