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;
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[Kafka] Running Kafka with Docker

Git Restore With Reflog

REST API with Python

So You Want To Write Software Now?

Coding Recap (Story after graduated from SMK)

Gotta fetch ‘em all: Building an intelligent semantic Image Search Engine using CLIP Embedding

png

Take Your University Email Into Action

IoT Development Practice in Python on Tuya Cloud Development Platform

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
Chun Ming Wang

Chun Ming Wang

More from Medium

system-ui and friends

Hide the Site Logo on a Specific Page

Bootstrap breakpoint name indicator tool

6 STEPS TO EASILY CREATE A RESPONSIVE YOUTUBE VIDEO