border submit, et border ahref

**LeGilou** · 07/04/2012, 21h42

Bonjour,

Je n'arrive pas à comprendre pourquoi les bordures de ces 2 boutons (le premier avec un lien ahref, et l'autre avec un input) ne réagissent pas de la même manière.
Le submit a des bordures à l’intérieur, et le ahref a des bordures à l’extérieur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!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" lang="fr" xml:lang="fr">
	<head>
		<title></title>
		<style type="text/css" >
 
		a, input {
			height: 30px; 
			line-height: 30px; 
			width: 120px;
			text-decoration: none;
			background-color: orange;
			border: 3px solid #000000;
			display: inline-block;
			text-align: center;
			color: #000000;
		}
		</style>
	</head>
 
	<body>
		<p>
		<input type='submit' value='Submit' />
		<a href='#'>a href</a>
		</p>
	</body>
</html>

Si vous avez une idée, je suis preneur.
Merci,

Gilou.

**NoSmoking** · 08/04/2012, 00h02

Bonsoir,
attention les deux éléments A et INPUT ne sont pas traités de la même façon
- A la border est ajoutée autour de l'élément
- INPUT la border est ajoutée à l'intérieur de l'élément

Il te faut donc les gérer dans des classes différentes au moins en ce qui concerne la hauteur, largeur et bordure éventuelle.

Testes en ajoutant cela au style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input{
  height:36px;
}

**LeGilou** · 08/04/2012, 12h45

ok, merci pour cette réponse.
Ca comble le manque.

Cette notion de border interne ou border externe manque au CCS.
A bon entendeur...

Merci encore,
Gilou.

border submit, et border ahref

CSS

Vue hybride

Discussions similaires

Partager

Partager