The top and bottom of the image are blank.I want to erase it.

I'm in trouble because there's a blank space on the web page.
I'd like to enclose it with a p-tag, but if I use a p-tag, I can't help but create spaces on the top and bottom.
I want to clear this blank space.
What should I do?

header-box image
There will be a space between the blue sea image and the sea image below.

<body>
   <divid="pc-wrapper">
      <divid="pc-header-box">
         <p><img src="aaa">/p>
      </div>
      <divid="pc-logo-box">
         <img src="logo">
      </div>
      <divid="pc-page-box1">
         <p><img src="bbb">/p>
      </div>
      <divid="pc-page-box2">
         <p><img src="bbb">/p>
      </div>
      <divid="pc-page-box3">
         <p><img src="ccc">/p>
      </div>
      <divid="pc-page-box4">
         <p><img src="ddd">/p>
      </div>
      <divid="pc-page-box5">
         <p><img src="eee">/p>
      </div>
      <divid="pc-page-box6">
         <p><img src="fff">/p>
      </div>
   </div>
<body>

css

#pc-wrapper
{
  display:block;
  width — 1300px;
  height —1800px;
  margin:0 auto;
}

# pc-header-box
{
  display:block;
  position:relative;
  width — 1300px;
  height —800px;
  vertical-align:bottom;
  margin:0 auto;
}

# pc-logo-box
{
  display:block;
  position:relative;
  width — 1300px;
  height —200px;
  background-color:#30F;
  margin:0 auto;
}

# pc-logo-box img
{
  display:block;
  position:relative;
  top —50px;
  margin:0 auto;
}

# pc-page-box1
{
  display:block;
  position:relative;
  background-color:#69C;
  width —650px;
  height —430px;
}

# pc-page-box1p
{
  display:block;
  background-color:#F99;
}

css

2022-09-30 20:36

1 Answers

The <p> tag has the upper and lower margins set in many browsers, so you can overwrite them.

(Note) The inline element <img> is vertical-align:baseline by default, so there seemed to be a slight gap.To avoid this, you may want to overwrite it with vertical-align:bottom or display:block.

Note (Considering accessibility) Eliminate the margins under the image|True

How about combining the above two points?

#pc-wrapperp
{
  margin:0;
}
# pc-wrapper img
{
  display:block;
  /* Vertical-align:bottom is OK when you want to arrange img horizontally*/
}

Sample

p{
  margin:0;
}

img{
  /* display:block;*/
  vertical-align:bottom;
}

<p>img src="http://dummyimage.com/100x100/000/fff"/>img src="http://dummyimage.com/100x100/000/fff"/>/p>
<p><img src="http://dummyimage.com/100x100/000/fff"/></p>

By the way, <div> and <p> are originally block elements, so you don't need display:block unless it's overwritten somewhere.

2022-09-30 20:36

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656