seo Question posted in
Some basic information to get you started with this can be found here.

A Div has gap on sides – SEO

I have an issue with my divs. Whenever I add a border to div, there is some gap inside of divs image. It has 0 margins and 0 padding. Image link: https://imgur.com/a/ojppCWU

There is no border gap and outline gap is added for them. Also there is no extra border, margins and padding is added inside div contents.

I have attached the live link of page in case if you didn’t found a bug from my snippet. You can review the live code here: https://10xplusmedia.com/seo-services/finalproject/pageold1.html

I have tried to add border-collapse, but it didn’t work. But when I add outline, gap is gone but there is no chance to add border-radius. I need border-radius anyway. So finding a solution for gap though.

There should be no gap if possible.

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.4285;
	color: #333;
	background-color: #fff;
}
body {
	font-family: arial;
	font-size: 16px;
}
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
html {
	font-size: 10px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
	height: 100%;
}
.pageold__1__main__div {
	border: 1px solid black;
	border-radius: 0;
	overflow: hidden;
}
.fgf {
	background-color: #e6e7e9;
}
.eco__eff_1 {
	overflow: hidden;
}
p {
	margin: 0 0 10px;
}
.stg-cs-a {
	margin: 14px 0 !important;
}
.lge p {
	margin: 15px;
	color: white;
}
.hj p {
	font-size: 14px;
	color: #233346;
}
.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4285;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.btn-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}
.btn-group-sm > .btn, .btn-sm {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}
.form-control, .btn {
	padding: 10px 12px;
	height: auto;
	font-size: 14px;
	border-radius: 5px;
}
.btn {
	border-radius: 5px;
}
.btn-sm {
	padding: 3px 10px;
}
.hj button {
	color: #ffffff;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.25);
	background-image: url("assets/images/bu.jpg");
	background-position: left center;
}
b, strong {
	font-weight: 700;
}
.stg {
	font-size: 8px;
}
.stg-cs-a .stg {
	font-size: 11px !important;
	font-weight: bold;
	display: block;
	padding: 5px 0px;
}
.stg-cs-a .stg {
	font-size: 8px !important;
	font-weight: bold;
	display: block;
	padding: 5px 0px;
}
.c__dd__1 {
	padding-right: 0px;
}
.lang {
	font-size: 16px;
	color: #6e7076;
	margin-left: 40px;
	margin-top: 25px;
}
.langs {
	font-size: 16px;
	color: #6e7076;
	margin-left: 40px;
}
.langss {
	margin-left: 30px;
}
.mggpp__opo {
	margin-left: 0px;
}
img {
	border: 0;
}
img {
	vertical-align: middle;
}
.mggpp__opo img {
	width: 30px !important;
}
.w_100_cs__a {
	width: 100% !important;
}
.bg_img_div__o {
	background: #2F518B;
	overflow: hidden;
}
.headeR__Page__old__1 {
	color: white;
	margin: 0;
	padding: 20px 0;
}
<div class="pageold__1__main__div">
          
          
            <div>
              <div class="bg_img_div__o">
                <div class="col-md-3 col-sm-3">
                  <p class="headeR__Page__old__1"><b>Booking ID:</b> EC4A7305</p>
                </div>
                <div class="col-md-6 col-sm-6">
                  <p class="headeR__Page__old__1"><b>Booking Date:</b> Montag, 27. Jan. 2018 - Dienstag, 28. Jan. 2018</p>
                </div>
                <div class="col-md-3 col-sm-3">
                  <p class="headeR__Page__old__1"><b>Booking Period:</b> 2Tage</p>
                </div>
              </div>
            </div>

          <div class="content__pageone_div">

            <div class=" ">
              <div class="row">
                <div class=" col-sm-3 c__dd__1">
                  <img class="w_100_cs__a" alt="" src="assets/images/gg.JPG">
                </div>
                <div class="col-sm-9 c__dd__2">
                  <p class="lang mggpp__opo"><b>  Langeoog,</b> Höhenpromenade 1, 26465 Langeoog</p>
                  <p class="langs mggpp__opo"><b> Öffnungszeiten:</b> 7:00 - 19:00 Uhr</p>
                  <p class="langss mggpp__opo">    <img style="    width: 40px;" alt="" src="assets/images/i0.JPG">
                    <img style="     width: 40px;&#10;                      margin-top: -1px;" alt="" src="assets/images/i2.JPG">
                    <img style="    width: 40px;" alt="" src="assets/images/i3.JPG">
                    <img style="    width: 41px;" alt="" src="assets/images/i4.JPG">
                    <img style="    width: 41px;" alt="" src="assets/images/i5.JPG">
                    <img style="    width: 41px;" alt="" src="assets/images/i6.JPG">
                    <img style="    width: 44px;" alt="" src="assets/images/i7.JPG">
                    <img style="    width: 41px;" alt="" src="assets/images/i8.JPG">
                    <img style="    width: 41px;" alt="" src="assets/images/i9.JPG">
                  </p>
                </div>
              </div>


            </div>


          </div>

            <div class="clearfix"></div>

            <div class="lge fgf eco__eff_1">
            <div class="col-md-3 col-sm-6  hj">
              <p><b>Sie haben gewählt:</b><br>2x Strandkorb</p>
            </div>
            <div class="col-md-3 col-sm-6 hj">
                
                  <p><b>Standort:: </b><br>Strandabschnitt: 105<br>Strandkorb: 471, 462</p>
                
            </div>
            
            <div class="col-md-3 col-sm-6">
              <div class="row">
                <div class="col-sm-6 hj">
                  <p><b>Strandkorb: </b><br>471 / 2 Tage<br>462 / 2 Tage</p>
                </div>
                <div class="col-sm-6 hj">
                  <p><br>21,98 EUR<br>21,98 EUR</p>
                </div>
              </div>
            </div>


            <div class="col-md-3 col-sm-6" style=" background-color: #FFB506;">
              <div class="row hj">
                <div class="col-sm-7 col-xs-4">
                  <p class="stg-cs-a"><b>Gesamtsumme: </b><br><span class="stg"> inkl. Steuern &amp; Gebühren <br>(inkl. 0.99 € Nutzungsentgeld pro Tag StandKorb)</span></p>
                </div>
                <div class=" col-xs-4"></div>
                <div class="col-sm-5 col-xs-4">
                  <p><b>43,96 EUR</b></p>
                  <button class="btn btn-primary btn-sm" type="button">Stornieren</button>
                  <br><br>
                </div>
              </div>
            </div>
          </div>



          </div>


        </div>
Tags:

2

Answers


  1. 0

    Your images have a white edge in them. Use image editing software to crop it out.

    enter image description here
    enter image description here

    Edit:
    I don’t see any gaps as indicated in your screenshot.
    Left is Chrome 71 and right is Firefox 65 Dev Edition both on MacOS 10.14

    enter image description here

    Login or Signup to reply.
  2. 0

    If it’s not the image try this and see if it works: 

    body, html {
   margin: 0px;
   padding: 0px;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search