title: Add padding to map area in MapBox
body: <p>How can I add padding to the map area? </p>
  
  <p>As you can see in the screenshot there is a yellow <code>div</code> overlaid over the top and the popup is appearing underneath it so I'd like to give the map area 100px padding to the top so the popup drops to the side. Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/XZ9oR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XZ9oR.png" alt="enter image description here"></a></p>
  
  <p>Code below:</p>
  
  <pre><code>        &lt;div id="map" class="map"&gt;&lt;/div&gt;
              &lt;script&gt;
                  mapboxgl.accessToken = 'pk.xxxxxx';
                  var map = new mapboxgl.Map({
                  container: 'map',
                  style: 'mapbox://styles/xxxxxx/cj5jggnud0m5g2soxqalq8z3n',
                  zoom: 3,
                  center: [50.075,26.136]
                  });
  
                  var geojson = {
                    type: 'FeatureCollection',
                    features: [
  
  
                    {
                      type: 'Feature',
                      geometry: {
                        type: 'Point',
                        coordinates: xx.xxxxx,xx.xxxxxx }}]
                      },
                      properties: {
                        title: 'Egypt',
                        description: 'Item One Item Two Item Three'
                      }
                    }
  
                   ]
                  };
  
                  // add markers to map
                  geojson.features.forEach(function(marker) {
  
                      // create a HTML element for each feature
                      var el = document.createElement('div');
                      el.className = 'marker';
  
                      // make a marker for each feature and add to the map
                      new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
                      .setLngLat(marker.geometry.coordinates)
                      .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
                      .setHTML('&lt;div class="map-marker"&gt;&lt;h3&gt;' + marker.properties.title + '&lt;/h3&gt;&lt;p&gt;' + marker.properties.description + '&lt;/p&gt;&lt;/div&gt;'))
                      .addTo(map);
                  });
  
                  // disable map zoom when using scroll
                  map.scrollZoom.disable();
                  // Add zoom and rotation controls to the map.
                  var nav = new mapboxgl.NavigationControl();
                  map.addControl(nav, 'bottom-right');
  
              &lt;/script&gt;
  </code></pre>