CSS: Hide <br> break tags using Cascading Style-Sheets

I had a problem today with WordPress. We decided to try adding AdSense code into the middle of our articles since the sidebar is going to be pushed to the bottom of the page on mobile devices.

When I pasted the AdSense code into the Text editor for WordPress, it seemed fine. But after saving it and looking at it a couple of times, I noticed that there were <br /> tags in the middle of the code.

The WYSIWYG WordPress editor we're using (TinyMCE Advanced) breaks Javascript lines apart from <ins> tags. So, it looked something like this:

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<br /> <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-99999" data-ad-slot="99999"></ins><br /><script>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>

That was causing an unwanted space to show up above the ad.

How to Hide <br> Tags Using display: none

So, I wrapped it in a <div> with the id "AdSense1":

<div id="AdSense1" style="clear: both;"><script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<br /> <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-2662953475244486" data-ad-slot="8854350737"></ins><br />
<script>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>
</div>

Finally, I added a couple of lines to my CSS file:

#AdSense1 br {
display:none;
}