title: How to prevent the sides of an image from being selected
body: <p>Below I have an image followed by text. How do I prevent the area surrounding it from being highlighted? The image itself is not selectable (using </p>
  
  <pre><code>-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    pointer-events: none;
  </code></pre>
  
  <p>) but the surrounding area of the image is. I tried adding left and right margins to the image as well as making the image its own div and applying the above code to the div, but it does not work. (I made the highlight green)</p>
  
  <p><img src="https://i.stack.imgur.com/KfJ0z.png" alt="See here"></p>
  
  <p><strong>Edit</strong>: Here is another example linked here <a href="https://jsfiddle.net/nnzf4h5c/" rel="nofollow noreferrer">https://jsfiddle.net/nnzf4h5c/</a><a href="https://i.stack.imgur.com/1w7Bb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1w7Bb.png" alt="jsfiddle example"></a></p>