CODEWITHSUNDEEP
htmlcss
Dmitry Lobov
Dmitry Lobov

Reputation: 303

Unnecessary space in an inline-blocks when line breaks

Is it possible to prevent the appearance of unnecessary space on the right of the inline-block when a line breaks? Here's my code for clarity 

.block1 {
  width: 300px;
  margin-bottom: 30px;
}

.block2 {
  width: 230px;
}

.main-text {
  display: inline-block;
  background-color: rgb(50, 50, 50);
  color: white;
  font-size: 40px;
}
<div class="block1">
  <span class="main-text">Main long text</span>
</div>
<div class="block2">
  <span class="main-text">Main long text</span>
</div>

Upvotes: 0

Views: 59

Answers (2)

Saravana Kumar
Saravana Kumar

Reputation: 1

.block1 {
  width: 300px;
  margin-bottom: 30px;
}

.block2 {
  width: 230px;
}

.main-text {
  display: inline;
  background-color: rgb(50, 50, 50);
  color: white;
  font-size: 40px;
}
<div class="block1">
  <span class="main-text">Main long text</span>
</div>
<div class="block2">
  <span class="main-text">Main long text</span>
</div>

Upvotes: 0

Terry
Terry

Reputation: 66123

What you're looking for is a highlighter effect. Unfortunately, as display: inline-block draws a "box" around the element, it will not work. Instead, you can use display: inline to achieve what you want. Simply wrap the inner text with another <span> element, and say, give it a class of .highlighter:

<span class="main-text">
    <span class="highlighter">Lorem ipsum dolor sit amet</span>
</span>

To trick the inline element to show left and right padding, you can simply draw a box-shadow around it. A box shadow on the left will have a negative x offset, e.g. -10px 0 0 <color>, while that on the right will have a positive x offset, e.g. 10px 0 0 <color>:

.main-text .highlighter {
  background-color: rgb(50,50,50);
  color: white;
  display: inline;
  box-shadow:
    -10px 0 0 rgb(50,50,50),  /* Left box shadow */
    10px 0 0 rgb(50,50,50);   /* Right box shadow */
  padding: 10px 0;            /* Top and bottom paddings */
}

The positional arguments for box-shadow are:

  1. x-offset
  2. y-offset
  3. blur-radius

A box shadow of -10px 0 0 <color> will generate a box shadow that is offset 10px to the left (creating an imaginary left padding, or extension of the background), with no y-offset and no blur. The converse is the same for 10px 0 0 <color>.

Since the 10px box shadow will be outside the drawing box of the element, make sure you provide an appropriate padding/margin in the parent so that they do not get cut off.

See proof-of-concept example below:

.block1 {
  width: 300px;
  margin-bottom: 30px;
  padding: 10px;  /* Give this the same value as the box-shadow offsets */
  background-color: steelblue; /* So you can see that the highlighter doesn't fall outside */
}
.main-text {
  display: inline-block;
  font-size: 40px;
  margin-bottom: 40px; /* For presentational purposes only */
}
.main-text .highlighter {
  background-color: rgb(50,50,50);
  color: white;
  display: inline;
  line-height: 1.5;           /* Line height used so backgrounds don't overlap */
  box-shadow:
    -10px 0 0 rgb(50,50,50),  /* Left box shadow */
    10px 0 0 rgb(50,50,50);   /* Right box shadow */
  padding: 10px 0;            /* Top and bottom paddings */
}
<div class="block1">
  <span class="main-text"><span class="highlighter">Lorem ipsum</span></span>
  
  <span class="main-text"><span class="highlighter">Lorem ipsum dolor sit amet</span></span>
  
  <span class="main-text"><span class="highlighter">Lorem ipsum dolor sit amet, I am a very long title</span></span>
</div>

Upvotes: 1

Related Questions