All geek questions in one place

Background-color on inline elements without inline padding

I want the background color to wrap exactly around inline characters.

I can’t explain it better, so here is an image showing exactly what I want:

desired effect

HTML

<div>
  <span>HTML Text block - HTML Text block</span>
</div>

CSS

div {
  max-width: 300px;
  line-height: 1.5;
  text-transform: uppercase;
}

span {
  background-color: white;
  box-shadow: 5px 5px 0 black;
  padding: 0;
}

If this cannot be done with CSS alone, can JavaScript help?

Here codepen

+4
source share
2 answers

Try the following:

<!doctype html>
<html>
<head>
  <title>Layout Experiments</title>
  <style>
    *{
      -webkit-box-sizing :border-box;
      -moz-box-sizing    :border-box;
      box-sizing         :border-box;
    }
    div{
      max-width      :300px;
      line-height    :1.5;
      text-transform :uppercase;
      height         :200px;
      background     :wheat;
    }
    span{
      background-color :white;
      box-shadow       :5px 5px 0 black;
      padding          :0;
    }
  </style>
</head>
<body>
<div>
  <span>HTML Text block - HTML Text block HTML Text block - HTML Text block</span>
</div>
</body>
</html>
0
source

try the following: <span>HTML <br>block <br>text - HTML <br>block text</span>

0
source

Source: https://habr.com/ru/post/1589403/

More articles:


All Articles