Why is there a margin around hr and img tags?

StackOverflow https://stackoverflow.com/questions/23599976

  •  20-07-2023
  •  | 
  •  

题

I am trying to remove the whitespace around hr and img tags, I have not had any luck yet, Here is a JSFiddle.

Can someone show me how to do this?

Is it a good idea to use hrs instead of divs when creating a sepearation/surrounding? Should I use a div instead? Can someone tell me which one is the better option. Sorry for the short question.

SOME CODE :

<img class="banner margin_padding" src="http://goo.gl/ftvYk5">
<hr class="line margin_padding"/>
<hr class="line margin_padding"/>
<hr class="line margin_padding"/>

img.banner {
    height: 200px;
    width: 100%;
}
hr.line {
    background-color: red;
    color: red;
    height: 20px;
}
.margin_padding {
    margin: 0px;
    padding: 0px;
}

EDIT :

Borders have a default border size I forgot about and the image should be displayed block

有帮助吗？

解决方案

Add display:block to your img tag and border:0 to your hr tag.

.margin_padding {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

其他提示

What you see is the default margin of the <body> tag. The actual value depends on the browser.

A common practice to avoid most browser's different default values is explicitly setting margin and padding to 0:

html, body {
    margin: 0;
    padding: 0;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top