CSS 텍스트만 여백 주기

1 개요

CSS 텍스트만 여백 주기

html

Copy

<style>
* { box-sizing: border-box; }
.content {
  border: 1px solid silver;
  width: 400px;
  padding: 0 15px;
}
.imgbox {
  margin: 0 -15px;
  text-align: center;
}
.imgbox img { max-width: 100%; }
</style>

<div class="content">

  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>

  <div class="imgbox"><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Reynisfjara_and_Reynisdrangar%2C_Iceland.jpg/600px-Reynisfjara_and_Reynisdrangar%2C_Iceland.jpg'></div>

  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>

  <div class="imgbox"><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Thomas_Jefferson%27s_Monticello.JPG/600px-Thomas_Jefferson%27s_Monticello.JPG'></div>

  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>

  <div class="imgbox"><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Laguna_Honda%2C_Bolivia%2C_2016-02-03%2C_DD_34.JPG/250px-Laguna_Honda%2C_Bolivia%2C_2016-02-03%2C_DD_34.JPG'></div>

  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>

</div>

2 같이 보기

• CSS .container