Image over padding

Question

I am trying to add an image next to a text inside a header but the image is over the padding.

body {
  margin: 0;
  padding: 0;
}

header {
  width: 95%;
  margin: 10px auto;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: blue;
}

<body>
  <header>
    <img src="http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px">
    <h1 style="display: inline-block;">
      Hi!
    </h1>
  </header>
</body>

I need them to be vertically aligned together, and the image to stop being on top of the padding.

This is different than other examples here on stackoverflow because here Im working with paddings.

Possible duplicate of [how to vertically align text next to a floated image?](http://stackoverflow.com/questions/10516157/how-to-vertically-align-text-next-to-a-floated-image) — The Codesee, Jan 31 '17 at 17:36

The Codesee · Accepted Answer · 2017-01-31T17:39:04.007

1

You can use Flex to make the text adjacent to the image:

div {
  display: flex;
  align-items: center;
}
header {
  width: 95%;
  margin: 10px auto;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  background-color: white;
}

<div>
  <img src="http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px">
  <h1>Hi!</h1>
</div>

Read more about Flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited Jan 31 '17 at 17:39

answered Jan 31 '17 at 17:32

The Codesee

3,714
5
38
78

yes, that worked! Thank you, i did not know about flex. – Chormi Jan 31 '17 at 17:37
@Chormi No problem :) Flex is actually really cool. I will include a link in my post about it. – The Codesee Jan 31 '17 at 17:38

score -1 · Answer 2 · answered Jan 31 '17 at 17:33

-1

Try to add this to you css file:

h1 {margin-top:10px;}

and add "align=left" to

<img src = "http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px" align="left">

answered Jan 31 '17 at 17:33

randomz

1
3

Do not suggest style-based attributes such as `align`, as they are obsolete in HTML5. – J. Titus Jan 31 '17 at 17:35

Image over padding

2 Answers2