0

el problema es que al poner display:block; al boton1 se aumenta su ancho no se porque ocurre eso le quiero agregar display block porque no puedo ponerle margin-top al botón porque no ocurre nada al ponerlo tengo que estar poniéndole una clase al texto para ponerle un margin bottom para así darle ese espacio que tiene y no quiero que este asi ayuda por favor(el Botón se ubica en el comentario galería se llama boton1)

este es mi codigo de css:

https://mega.nz/#!x3RlgSBQ!U-TAqmJgrEbAlVb8pZJBd30nERKFQotVLG4_bYrrbes

este es mi codigo de html:

https://mega.nz/#!Yr5ynASA!IYMVuXkrJlCXaNL8RNz7doCY2saSpdCL3_2HMiNnORY

les dejo el enlace mega porque no me pone bien lo que es html y css

body {
    font-family: 'arial', sans-serif;
    font-size: 14px;
    color: #666666;
    line-height: 1.8em;
    font-weight: 400;
    background: #ffffff;
}

/*GALERIA*/
.textodegaleria{
	margin-bottom: 20px;
}
.galeria{
	position:relative;
	width: 1366px;  
	background-color: transparent;
}
.boton1{
	margin-top: 20px;
	text-decoration: none;
  padding: 10px 30px;
  line-height: 24px;
  text-transform: uppercase;
  background-color: #fb4043;
  color: #ffffff;
  border: 2px solid #fb4043;
  font-size: 13px;
  font-weight: 600;
  border-radius: 2px;
}
.boton1:hover{
	background-color: #ffffff;
	color: #fb4043

}
.textoyboton{
	width: 572px;
  top: 160px;
  margin-left: 100px;
}

.imagen1{
	width: 100%;
  position: relative;
  bottom: 15px;
  right: 8px;
}

.titulo-de-div{
	font-size: 36px;
  color: #46a5e5;
  font-weight: 700;
  text-transform: uppercase;
}
<div class="galeria">
  <img class="imagen1" src="imagenes/div1.jpg">
  <div class="textoyboton">
  <h2 class="titulo-de-div">health and wellbeing</h2>
  <p class="textodegaleria">Liberal,cocollaborative consumptionfluctuation social analysis,<br>
  rural United Nations outcomesfoundation deep engagement.	
  </p>
  <a class="boton1" href="">LEARN MORE</a>
</div>

1
  • 2
    Por qué no creas un snippet en esta página?
    – Art_Code
    Commented el 2 mar. 2018 a las 18:46

2 respuestas 2

2

Lo que sucede es que es el comportamiento normal de display: block;, agrega al ancho un 100%. Button es de tipo inline, por lo que tu necesitas una solución intermedia, es decir, basta con: display: inline-block.

pd: Por cierto, no es recomendable poner enlaces externos y menos si no son de visualizacion online, lo mejor es que uses el comando control + M o subas tu demo a codepen.io/pen.

body {
    font-family: 'arial', sans-serif;
    font-size: 14px;
    color: #666666;
    line-height: 1.8em;
    font-weight: 400;
    background: #ffffff;
}

/*GALERIA*/
.textodegaleria{
	margin-bottom: 20px;
}
.galeria{
	position:relative;
	width: 1366px;  
	background-color: transparent;
}
.boton1{
  display: inline-block;
	margin-top: 20px;
	text-decoration: none;
  padding: 10px 30px;
  line-height: 24px;
  text-transform: uppercase;
  background-color: #fb4043;
  color: #ffffff;
  border: 2px solid #fb4043;
  font-size: 13px;
  font-weight: 600;
  border-radius: 2px;
}
.boton1:hover{
	background-color: #ffffff;
	color: #fb4043

}
.textoyboton{
	width: 572px;
  top: 160px;
  margin-left: 100px;
}

.imagen1{
  width: 100%;
  position: relative;
  bottom: 15px;
  right: 8px;
}

.titulo-de-div{
	font-size: 36px;
  color: #46a5e5;
  font-weight: 700;
  text-transform: uppercase;
}
<div class="galeria">
  <img class="imagen1" src="imagenes/div1.jpg">
  <div class="textoyboton">
  <h2 class="titulo-de-div">health and wellbeing</h2>
  <p class="textodegaleria">Liberal,cocollaborative consumptionfluctuation social analysis,<br>
  rural United Nations outcomesfoundation deep engagement.	
  </p>
  <a class="boton1" href="">LEARN MORE</a>
</div>

0

Puedes agregar esto:

.boton1{
    display: block;
    float: left;
    clear:left;
}

o también:

.boton1{width: max-content;}

para otros casos:

.boton1{display: inline-block;}

también puede servirte:

.boton1{display: table;}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.