How can I put a space on the edge of the photo?-CodePudding

[I am editing a website via html, but I want to center the photos by adding a space next to the leftmost photo in the photos I add.1 How can i add spaces near the pics? I'm new in html/css using.

‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏ ‏‏‏‏‏‏‏‏

CSS CODE:

h1{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
p{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
h2{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
.photodesc{font-size:1.5em;}
#miata{height: 350px; width: 600px; text-align: center;}
#m6{height: 350px; width: 600px; text-align: center;}
#m3{margin-right: 20; height: 350px; width: 600px; text-align: center;}

.aw-zoom
{
    position: relative;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
}
.aw-zoom:hover
{
    z-index:2;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);  
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}

 HTML CODE:

<html>
<head>
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="stylesheet.css" rel="stylesheet"/>
    <style> 
    *{
        box-sizing: border-box;
    }
    .img-container{
        float: left;
        width: 33.33%;
        padding: 5px;
    } 
    .temizle::after{
        content: "";
        clear:both;
        display: table;
    }
    </style>
    
<link rel="shortcut icon" type="image/png" href="/mazdalogo.png"/>
<title> Mazda Türkiye </title>
<meta name="abstract" content="Mazda Türkiye">
<meta name="description" content="Yolların Hakimi">
<meta http-equiv="content-language" content="tr">
</head>
<body bgcolor="black" style="color:white">
    <div >
<img src="mazdalogo.png" alt="logo" width="120" height="120" /> 
<h1> Mazda Türkiye </h1> 
 <br>
<div align="center"> <img src="slide.gif" alt="galeri"/> </div>
<h1 align="center"> OTOMOBİL VE SÜRÜCÜSÜNÜN MÜKEMMEL UYUMU </h1>
</p align="center">Bir Mazda kullanırken asla yalnız değilsinizdir. Sürücü ve otomobil mükemmel bir uyum içindedir. Tıpkı bir at ve binicisi gibi. İnanıyoruz ki bu uyum yakalandığında sürüş eğlenceli bir hale gelir. Bunu kendi tarzımızla yaparız zira otomobillerimiz sadece sizi bir noktadan diğerine taşıyan araçlar değildir. Eksilterek güzelleştiririz. Saf ve sezgilerle gelişen bir ilişkidir bu, kelimelerin ifade etmeye yetersiz kaldığı. Birlikte daha güçlüyüz. Asla yalnız sürmeyiz. Birlikte süreriz. </p>
<br><h2 align="center"> MODELLERİMİZ </h2>
<div  id="miata">  
<img   src="miata.jpg" style="width:100%;" alt="maita"  />
<span >MX-5</span>
</div>
<div  id="m6">
<img   src="m6.jpg" style="width:100%;" alt="mazda6"  />
<span >Mazda6</span>
</div>
<div  id="m3">
    <img   src="m3.jpg" style="width:100%" alt="mazda3" />
    <span >Mazda3</span>
</div>
</div>
</body>
</html>

CodePudding user response：

You could work with a margin, but a better solution would be to use flex or grid here. This works by making the parent element a flex or grid container. The child elements then become flex or grid items.

Using these layout modules of CSS will make it easier for you to make your webpage responsive.

I have commented out some of your css rules to make this solution work.

Solution with flex:

.flex-container {
    display: flex;
    justify-content: space-evenly;
}

h1{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
p{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
h2{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
.photodesc{font-size:1.5em;}
/* #miata{height: 350px; width: 600px; text-align: center;}
#m6{height: 350px; width: 600px; text-align: center;}
#m3{margin-right: 20; height: 350px; width: 600px; text-align: center;} */

.aw-zoom
{
    position: relative;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
}
.aw-zoom:hover
{
    z-index:2;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);  
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}

<!DOCTYPE html>
<html>

<head>
  <link href="css.css" type="text/css" rel="stylesheet" />
  <link href="stylesheet.css" rel="stylesheet" />
  <style>
    * {
      box-sizing: border-box;
    }

    .img-container {
      <!-- float: left; -->
      <!-- width: 33.33%; -->
      padding: 5px;
    }

    .temizle::after {
      content: "";
      clear: both;
      display: table;
    }
  </style>

  <link rel="shortcut icon" type="image/png" href="/mazdalogo.png" />
  <title> Mazda Türkiye </title>
  <meta name="abstract" content="Mazda Türkiye">
  <meta name="description" content="Yolların Hakimi">
  <meta http-equiv="content-language" content="tr">
</head>

<body bgcolor="black" style="color:white">
  <div >
    <img src="mazdalogo.png" alt="logo" width="120" height="120" />
    <h1> Mazda Türkiye </h1>
    <br>
    <div align="center"> <img src="slide.gif" alt="galeri" /> </div>
    <h1 align="center"> OTOMOBİL VE SÜRÜCÜSÜNÜN MÜKEMMEL UYUMU </h1>
    </p align="center">Bir Mazda kullanırken asla yalnız değilsinizdir. Sürücü ve otomobil mükemmel bir uyum içindedir.
    Tıpkı bir at ve binicisi gibi. İnanıyoruz ki bu uyum yakalandığında sürüş eğlenceli bir hale gelir. Bunu kendi
    tarzımızla yaparız zira otomobillerimiz sadece sizi bir noktadan diğerine taşıyan araçlar değildir. Eksilterek
    güzelleştiririz. Saf ve sezgilerle gelişen bir ilişkidir bu, kelimelerin ifade etmeye yetersiz kaldığı. Birlikte
    daha güçlüyüz. Asla yalnız sürmeyiz. Birlikte süreriz. </p>
    <br>
    <h2 align="center"> MODELLERİMİZ </h2>
    <!-- Wrap elements in flex container -->
    <div >
      <div  id="miata">
        <img  src="https://dummyimage.com/600x350/000/fff" style="width:100%;" alt="maita" />
        <span >MX-5</span>
      </div>
      <div  id="m6">
        <img  src="https://dummyimage.com/600x350/000/fff" style="width:100%;" alt="mazda6" />
        <span >Mazda6</span>
      </div>
      <div  id="m3">
        <img  src="https://dummyimage.com/600x350/000/fff" style="width:100%" alt="mazda3" />
        <span >Mazda3</span>
      </div>
    </div>
  </div>
</body>

</html>

Solution with grid:

/* style grid container here */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* makes 2 columns of 1fr */
}

h1{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
p{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
h2{
    font-family: 'Mazda Type';
font-weight: 500;
    font-style: normal;
}
.photodesc{font-size:1.5em;}
/* #miata{height: 350px; width: 600px; text-align: center;}
#m6{height: 350px; width: 600px; text-align: center;}
#m3{margin-right: 20; height: 350px; width: 600px; text-align: center;} */

.aw-zoom
{
    position: relative;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
}
.aw-zoom:hover
{
    z-index:2;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);  
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}

<!DOCTYPE html>
<html>

<head>
  <link href="css.css" type="text/css" rel="stylesheet" />
  <link href="stylesheet.css" rel="stylesheet" />
  <style>
    * {
      box-sizing: border-box;
    }

    .img-container {
      <!-- float: left; -->
      <!-- width: 33.33%; -->
      padding: 5px;
    }

    .temizle::after {
      content: "";
      clear: both;
      display: table;
    }
  </style>

  <link rel="shortcut icon" type="image/png" href="/mazdalogo.png" />
  <title> Mazda Türkiye </title>
  <meta name="abstract" content="Mazda Türkiye">
  <meta name="description" content="Yolların Hakimi">
  <meta http-equiv="content-language" content="tr">
</head>

<body bgcolor="black" style="color:white">
  <div >
    <img src="mazdalogo.png" alt="logo" width="120" height="120" />
    <h1> Mazda Türkiye </h1>
    <br>
    <div align="center"> <img src="slide.gif" alt="galeri" /> </div>
    <h1 align="center"> OTOMOBİL VE SÜRÜCÜSÜNÜN MÜKEMMEL UYUMU </h1>
    </p align="center">Bir Mazda kullanırken asla yalnız değilsinizdir. Sürücü ve otomobil mükemmel bir uyum içindedir.
    Tıpkı bir at ve binicisi gibi. İnanıyoruz ki bu uyum yakalandığında sürüş eğlenceli bir hale gelir. Bunu kendi
    tarzımızla yaparız zira otomobillerimiz sadece sizi bir noktadan diğerine taşıyan araçlar değildir. Eksilterek
    güzelleştiririz. Saf ve sezgilerle gelişen bir ilişkidir bu, kelimelerin ifade etmeye yetersiz kaldığı. Birlikte
    daha güçlüyüz. Asla yalnız sürmeyiz. Birlikte süreriz. </p>
    <br>
    <h2 align="center"> MODELLERİMİZ </h2>
    <!-- Wrap elements in grid container -->
    <div >
      <div  id="miata">
        <img  src="https://dummyimage.com/600x350/000/fff" style="width:100%;" alt="maita" />
        <span >MX-5</span>
      </div>
      <div  id="m6">
        <img  src="https://dummyimage.com/600x350/000/fff" style="width:100%;" alt="mazda6" />
        <span >Mazda6</span>
      </div>
      <div  id="m3">
        <img  src="https://dummyimage.com/600x350/000/fff" style="width:100%" alt="mazda3" />
        <span >Mazda3</span>
      </div>
    </div>
  </div>
</body>

</html>

Official documentation for further reference: