I've got a div that's in a .wrapper which has padding. What's best practice for making the text not take up the full width of .box1?

.wrapper {
  padding-inline: 50px;
}

.box1 {
  background-color: orange;
}

<div >
  <div >
    <p>
      =Lorem Ipsum is simply dummy text of the printing and typesetting
      industry. Lorem Ipsum has been the industry's standard dummy text ever
      since the 1500s, when an unknown printer took a galley of type and
      scrambled it to make a type specimen book. It has survived not only five
      centuries, but also the leap into electronic typesetting, remaining
      essentially unchanged. It was popularised in the 1960s with the release of
      Letraset sheets containing Lorem Ipsum passages, and more recently with
      desktop publishing software like Aldus PageMaker including versions of
      Lorem Ipsum.
    </p>
  </div>
</div>

I considered two options,

1. Creating another wrapper around .box1 and then setting the width of .box1, which I dislike since you're losing markup semantics.

2. Putting a transparent float to the right of .box1 to limit the line box, but this seems kind of hacky, e.g

.box1 {
  background-color: orange;
}

.wrapper {
  padding-inline: 50px;
}

p::before {
  content: "";
  width: 100px;
  float: right;
  height: 200px;
  background-color: transparent;
}

<div >
  <div >
    <p>
      =Lorem Ipsum is simply dummy text of the printing and typesetting
      industry. Lorem Ipsum has been the industry's standard dummy text ever
      since the 1500s, when an unknown printer took a galley of type and
      scrambled it to make a type specimen book. It has survived not only five
      centuries, but also the leap into electronic typesetting, remaining
      essentially unchanged. It was popularised in the 1960s with the release of
      Letraset sheets containing Lorem Ipsum passages, and more recently with
      desktop publishing software like Aldus PageMaker including versions of
      Lorem Ipsum.
    </p>
  </div>
</div>

CodePudding user response：

add padding to your .box

.box1 {
    background-color: orange;
    padding: 10px;
}

so you have 10px space to all directions, you can add different space sizes with the padding rule, padding: 10px 20px 30px 40px means to top 10px, to right 20px, to bottom 30px and to left 40px space.

if you want space to between wrapper and box1 set margin to box1

please tell more detailed what you want to reach