Height margin in chrome desktop is different from chrome mobile

HTML & CSS
1

If I open the page at http://dot.kr/Q/layout/21dotKr.php in chrome desktop,
There are 2 black circles , the circle above and the circle below
And there is a little margin between the circle above and the circle below.
I like the margin made by “height:7px” in chrome desktop.
However, when I open the page in chrome mobile, the margin is wider than in chrome desktop.

In order to make narrower the margin in chrome mobile, I try to make it with writing “height:1px” at http://dot.kr/Q/layout/22dotKr.php.
Then it looks good in chrome mobile.
However, it looks too narrow in chrome desktop.

Can I make it same looks in chrome both desktop and mobile?

2

I’m on a mobile at the moment so have no way to access the html and css but can you explain why you are using height to create a margin and not margin?

If you are using height on an empty block element then have you also controlled the line-height and/or the padding/margins be on the element you are using?

If you post your html and css I can probably see the reason or I’ll have a look when I get back to my computer later.

1 Like
3

line-height at http://dot.kr/Q/layout/23dotKr.php and http://dot.kr/Q/layout/24dotKr.php are also different between desktop and mobile chrome.

margin-top seems not to work at http://dot.kr/Q/layout/25dotKr.php I don’t know what I did wrong.

4

You don’'t seem to be doing anything to control the space correctly.

Inline elements will have a height subject to the default line-height (whatever that may be) and will sit on the baseline. If you add vertical padding to inline elements then that will bleed over the line height depending on what that particular browser determines is a suitable line-height… It will not increase the line-height. Inline elements cannot take dimensions either and vertical margins will have no effect.

This is basic css and the difference between inline and block elements.

If you want things to be exact then you have to use block boxes (or block structures such as flex) and control things explicitly.

e.g.

.circles {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#logoX {
  height: 18px;
  line-height: 18px;
  margin-bottom: 7px;
  overflow: hidden;
}
.circles a {
  background: black;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="circles">
  <span id="logoX">●</span>
  <a href="#">KR</a>
</div>

Of course I don;t really know what size that small dot is supposed to be as it will render a different size in your language so you should probably size it on the same way that the bigger circle is sized and be explicit.

1 Like
5

it works fine at http://dot.kr/Q/layout/27circle/
it looks almost same in chrome both desktop and mobile.
And I can cotrol the vertical height by margin-bottom at http://dot.kr/Q/layout/28circle/

Thank you very much.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.