Member Avatar for Altairzq

As you can see in this test, if you change the font-size in the body section to 0px, it's the only way to bring the divs containing the images together. Could anyone see a solution to this? I can't set the fonts to 0px in the website, and can't understand why is this happening.

I'm testing with Firefox but same is happening in Safari. Haven't tried IE, but it's not really important because I will be using the web only in FF and Safari.

http://localhost/america/editora/test.html

Edited by Altairzq because: n/a
  • 3 Contributors
  • 8 Replies
  • 193 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Altairzq

Dani AI

Generated

Short answer: the visible gap is not a mysterious margin — it’s the browser rendering the literal whitespace (space/newline) between inline-level boxes as a text space. That space is a typographic glyph whose width depends on the current font metrics, so changing the parent font size changes the gap. That is why you saw the gap disappear when you reduced the font size to zero. already discovered the symptom; ’s float suggestion works because floats are removed from inline text flow and therefore ignore that inter-element text node.

Practical options (pick one that fits your layout):

  • Modern, robust: use a flex container so the images are laid out as siblings with no text-space between them.
<div class="btn-row">
  <img src="up.png" alt="">
  <img src="down.png" alt="">
  <img src="del.png" alt="">
</div>

<style>
.btn-row { display:flex; gap:0; align-items:center; }
.btn-row img { display:block; }
</style>
  • Keep inline(-block) appearance but remove the literal whitespace in HTML. Either put tags immediately adjacent (</div><div>) or use the comment trick to hide the newline:
<span class="btn"></span><!--
--><span class="btn"></span>
  • If you must use inline formatting and want the quick hack: set the parent font-size to zero and then restore sizes on children — but apply this only to the tight container so it does not affect page text.

Extra tips: if you see a vertical gap under the images, make each image display:block or set vertical-align: top|middle on the inline element (that controls baseline alignment). Also double-check markup validity (missing or malformed tags can create odd layout effects) — ’s request to post the code was the right troubleshooting step. For modern layouts prefer flexbox (or grid) over floats for predictable, gap-free alignment.

Recommended Answers

All 8 Replies

Member Avatar for peter_budo

The code is local to your machine so we would not be able to see the code till you post it...

Member Avatar for Altairzq

Ack, sorry about that here is the right link and the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

<style type="text/css">
body {
	font-size:13px;
}
.enlinia {
	height:8px;
	width:13px;
	display:inline;
}
</style>
    
</head>
<body>
	<div class="enlinia" <IMG SRC="../imatges/botoAmunt.png"></div>
	<div class="enlinia" <IMG SRC="../imatges/botoAvall.png"></div>
	<div class="enlinia" <IMG SRC="../imatges/botoEsborrar.png"></div>
</body>
</html>
Edited by Altairzq because: n/a
Member Avatar for ko ko

Need '>' to your div open tag. And XHTML is case-sensitive and all tags and attributes must be lowercase, and non-close tags need forward slash such as 'img', 'br' or 'hr'.

<IMG SRC="../imatges/botoAmunt.png">

Must be

<img src="../imatges/botoAmunt.png" />
Member Avatar for Altairzq

Thank you Zero13 I fixed and uploaded the code following your directions but the divs still have the gap. I added a border so it can be seen more clearly.

The gap only goes away changing the font-size in the body section to 0px, but this is something I can't do.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

<style type="text/css">
body {
	font-size:13px;
}
.enlinia {
	border:thin solid;
	height:8px;
	width:13px;
	display:inline;
}
</style>
    
</head>
<body>
	<div class="enlinia"><img src="../imatges/botoAmunt.png" /></div>
	<div class="enlinia"><img src="../imatges/botoAvall.png" /></div>
	<div class="enlinia"><img src="../imatges/botoEsborrar.png" /></div>
</body>
</html>
Member Avatar for ko ko

The problem is the 'inline' property to your div. I can't explain clearly but changing block element to inline wrap some white space around them. Try to float them appear next to each.

#
.enlinia {
border:thin solid;
height:8px;
width:13px;
float: left
}

This should work. Thanks for your response.

Member Avatar for ko ko

The problem is the 'inline' property to your div. I can't explain clearly but changing block element to inline wrap some white space around them. Try to float them appear next to each.

#
.enlinia {
border:thin solid;
height:8px;
width:13px;
float: left
}

This should work. Thanks for your response.

commented: Thanks for your help +0
Member Avatar for Altairzq

That worked thanks a lot! :)

Still I'm curious, why the font-size was affecting that?

Member Avatar for Altairzq

Anyone has any clue?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.