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

Html – How to fix this image inside column and have 20px margin from top, left and right?

I have this row of three columns where I want an image in each column and for this image to take 20px margin from top, left and right. margin-right rule is having no effect on image, margin-left makes it move towards right and overlap the other column.

HTML
<div class="row">
  <div class="column">
  <p class="title">News</p>
  <img src="https://circleyoga.com/wp-content/uploads/2023/12/Gift-Box-v2-500x300-1.jpg" alt="">
</div>

CSS 
.row{
 display: flex;
 max-width: 1060px;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 margin-top: 30px;
 box-sizing: border-box;
}
.column{
 display: inline-block;
 min-height: 500px;
 width: 33.33%;
 border: 5px solid #F8F8F8;
 box-sizing: border-box;
}

.title{
 font-family: 'Nunito Sans', sans-serif;
 font-size: 30px;
 font-weight: 100;
 border-left-style: solid;
 border-left-width: 5px;
 border-color: #d54126;
 padding-left: 13px;
 margin: 10px 0px;
}

.column img{
 display: block;
 max-width: 100%;
 height: auto;
 margin: 20px 20px 0 20px;
}
Tags:

3

Answers


  1. 0 
    .row {
  display: flex;
  max-width: 1060px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
}

.column {
  display: inline-block;
  min-height: 500px;
  width: 33.33%;
  border: 5px solid #F8F8F8;
  box-sizing: border-box;
}

.title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 30px;
  font-weight: 100;
  border-left-style: solid;
  border-left-width: 5px;
  border-color: #d54126;
  padding-left: 13px;
  margin: 10px 0px;
}

.column img {
  display: block;
  max-width: calc(100% - 40px); /* 20px left margin + 20px right margin */
  height: auto;
  margin: 20px 20px 0 20px;
  box-sizing: border-box;
}
    <div class="row">
  <div class="column">
  <p class="title">News</p>
  <img src="https://circleyoga.com/wp-content/uploads/2023/12/Gift-Box-v2-500x300-1.jpg" alt="">
</div>

    The problem might be related to the max-width: 100%; property in the .column img style. When the image is at its maximum width, adding a right margin might not have a visible effect. To resolve this, you can set the box-sizing property to border-box for the image, and adjust the width property to accommodate the margins.

    Here’s an updated version of your CSS:

    .row {
  display: flex;
  max-width: 1060px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 30px;
  box-sizing: border-box;
}

.column {
  display: inline-block;
  min-height: 500px;
  width: 33.33%;
  border: 5px solid #F8F8F8;
  box-sizing: border-box;
}

.title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 30px;
  font-weight: 100;
  border-left-style: solid;
  border-left-width: 5px;
  border-color: #d54126;
  padding-left: 13px;
  margin: 10px 0px;
}

.column img {
  display: block;
  max-width: calc(100% - 40px); /* 20px left margin + 20px right margin */
  height: auto;
  margin: 20px 20px 0 20px;
  box-sizing: border-box;
}
    Login or Signup to reply.
  2. 0

    It looks like you are using the display: flex property on the .row class to create a flex container, and then using display: inline-block on the .column class. This combination might be causing some issues with the layout. Instead, you can use flex: 1 on the .column class to make each column take up equal width within the flex container. Additionally, you can use the box-sizing: border-box property to include padding and border in the element’s total width and height..

    .row {
 display: flex;
 max-width: 1060px;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 margin-top: 30px;
 box-sizing: border-box;
}

.column {
 flex: 1;
 border: 5px solid #F8F8F8;
 box-sizing: border-box;
}

.title {
 font-family: 'Nunito Sans', sans-serif;
 font-size: 30px;
 font-weight: 100;
 border-left-style: solid;
 border-left-width: 5px;
 border-color: #d54126;
 padding-left: 13px;
 margin: 10px 0px;
}

.column img {
 display: block;
 max-width: 100%;
 height: auto;
 margin: 20px;
}
    Login or Signup to reply.
  3. 0

    you must change the max-width in img CSS class to:

    max-width: -webkit-fill-available;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search