Add Beautiful Free Space around Images

div {
width: 100%;
padding: 3.5%;
}
The page view in iPhone X
The size of the image
The size of the <div> element
* {
box-sizing: border-box;
}
Image stays in the place as I expect
Size of the <div> element
// HTML
<body>
<div>
<img src="/blog.jpg">
</div>
</body>
// CSS
div {
width: 100%;
padding: 3.5%;
}
div img {
width: 100%;
height: auto;
}
// HTML
<body>
<div>
<img src="/blog.jpg">
</div>
</body>
// CSS
* {
box-sizing: border-box;
}
div {
width: 100%;
padding: 3.5%;
}
div img {
width: 100%;
height: auto;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store