html - 在表格列之间设置边距/填充而不更改每列宽度

Question

在全屏上，我有 3 列，我试图让这些列在每列之间有填充/边距。当我将边距设置为以下时：

margin: 0 25px;

第三列低于其他两列。我的代码如下：

<div class="landscape-row">
  <div class="landscape-column">
    <img src="https://via.placeholder.com/500x500"  style="width:100%">  
    <h1>example heading</h1>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="landscape-column">
    <img src="https://via.placeholder.com/500x500"  style="width:100%">  
    <h1>example heading</h1>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  <div class="landscape-column">
    <img src="https://via.placeholder.com/500x500"  style="width:100%">  
    <h1>example heading</h1>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

我的CSS如下：

* {
    box-sizing: border-box;
}

.landscape-row{
width:100%;
padding-left: 25px;
padding-right: 25px;
}
.landscape-column {
    float: left;
    width: 33.33%;
    padding: 5px;

    border-radius: 4px;
    border: 2px solid #e7e7e7;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-sizing: border-box;

}

.landscape-row::after {
    content: "";
    clear: both;
    display: table;
    padding: 10px;

}

img{
padding-left:20px;
padding-right:20px;
padding-top:20px;
}

h1{
text-align:center;
}

p{
padding-left:20px;
padding-right:20px;
text-align:center;

}

@media screen and (max-width: 750px) {
    .landscape-column {
        width: 50%;
    }

    .landscape-column:last-child{
    width: 100%;
    margin-top: 25px;
    }
}

@media screen and (max-width: 500px) {
    .landscape-column {
        width: 100%;
    }
}

下面是我所拥有的 JS Fiddle https://jsfiddle.net/tos3y2jk/3/

对此的任何帮助将不胜感激

标签： htmlcss